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程序报错

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));