webpack配置之webpack.config.js文件配置

Posted 2021-03-23 明奴

webpack配置之webpack.config.js文件配置

webpack.config.js webpack resolve 

1.总是手动的输入webpack的输入输出文件路径，是一件非常繁琐的事情。我们尝试用文件的形式将输入输出文件夹配置好。新建一个js文件，并命名为webpack.config.js【目前只能命名为这个，不然程序不识别】

webpack.config.js

2.在webpack.config.js文件内输入以下代码

module.exports = {
    entry: \'./src/main.js\', //打包文件入口
    output: {               //打包文件出口
        path: \'./dist\',
        filename: \'bundle.js\'
    }
}

3.由于已经配置好输入输出文件夹，可以直接输入webpack运行指令，但是程序报错。

输入webpac程序报错

nvalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

The output directory as absolute path (required)"./dist" is not an absolute path!
The output directory as absolute path (required) #f00

4.这是因为上述文件的output对象的path属性必须是绝对路径，此时我们要引入路径依赖包path。该包有个方法path.resolve(__dirname,\'dist\')可以将相对路径转成绝对路径。其中__dirname指的是当前文件【webpack.config.js】的上一级路径.

 如webpack.config.js的路径为D:/aaa/bbb/webpack.config.js,
则__dirname为D:/aaa/bbb/，
path.resolve(__dirname,\'dist\')就是D:/aaa/bbb/dist.

5.引入path包,【该包有个方法path.resolve(__dirname,\'dist\')可以将相对路径转成绝对路径】并修改output对象的path属性。

const path = require(\'path\'); //1.引入path包
module.exports = {
    entry: \'./src/main.js\',
    output: { 
        path: path.resolve(__dirname, \'dist\'),//2.修改output对象的path属性
        filename: \'bundle.js\'
    }
}

引入path包，并修改output对象的path属性

6.运行webpack指令，在dist文件夹下获得打包好的包。

运行webpack指令

7.由于我们使用的是npm指令对js项目进行管理，直接使用webpack指令会造成混乱，后期webpack指令过于繁琐或者配置更改后，webpack指令会容易出现错误，所以将通用的指令映射到/写到package.json文件内，是一个明智的选择。找到package.json文件，在其script属性下添加指令键值对，即key:value..由于webpack是打包指令，这里我们设定其key为build,value为webpack.

在其script属性下添加指令

8.运行指令npm run build,输出如下图所示。

运行指令npm run build

9.然后在index.html内用script标签引入,打开浏览器即可.

用script标签引

//test.js
function add(num1, num2) {
    return num1 + num2
}

function mul(num1, num2) {
    return num1 * num2
}

module.exports = {
    add,
    mul
}

//main.js
 const { add, mul } = require("./test.js");

console.log(add(20, 30));
console.log(mul(20, 30));

打开浏览器控制台

注意：之前直接在终端或者控制台使用webpack指令，使用的是全局安装的webpack包。不同项目使用的webpack的版本不一致，强行使用全局webpack会导致打包错误.在package.json的script添加webpack指令属于使用本地webpack

让我们再次回顾一下整个打包流程。

当我们在控制台/终端，直接输入webpack命令执行的时候，webpack做了以下几步：
1.首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口

运行webpack指令,没有指定出入口

2.webpack就会去项目的根目录中，查找一个叫做‘webpack.config.js的配置文件

查找一个叫做‘webpack.config.js

3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了含有出入口路径的配置对象

获取entry和output属性

4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；

文件配置相当于在命令行直接输入webpack 入口url 出口url