webpack使用方法（三）：自定义webpack配置

---

前言

    实际上，webpack-cli给我们提供了丰富的终端命令行指令，可以通过webpack --help来查看。同样，需要在前面加上npx

npx webpack --help

---

一、设置入口文件

1. 进入上一节的setup目录，手动删除dist文件夹。

2. 输入指令

   npx webpack --entry ./src/index.js --mode production
   

   –entry表示设置后面路径的文件为入口文件，–mode指定环境，production为生产环境。
   运行之后发现setup目录下同样生成了dist文件夹及其子文件main.js。
   

3. 到这里就会发现，使用这种命令行来打包文件，真的很不方便，也不直观，而且还不能保存我们的一些配置。因此，webpack给我们提供了通过配置文件去自定义配置参数的能力。

二、通过配置文件来配置参数

1. 在setup目录下新建webpack.config.js文件
   
   这个文件名不能随便取，因为这是webpack自动读取的

2. 这个文件是在Node.js里面运行的，因此，定义模块的时候要使用Node.js的CommonJs模块，所以使用module.exports来定义。
   

3. 首先，设置入口entry，还是以index.js为入口文件。

   module.exports = {
   	entry:'./src/index.js',
   }
   

4. 设置出口output，filename属性指定输出文件的文件名，path属性指定输出路径。

   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:'./dist'
       }
   }
   

5. 执行npx webpack命令

   npx webpack
   

   发现报错了，提示输出路径“./dist”不是一个绝对路径
   

6. 使用Node.js的方法将输出路径设置为绝对路径，第一个参数__dirname表示当前webpack.config.js所在的物理路径，第二个参数表示基于第一个参数的路径，将文件解析到这个路径下，这样就指定了一个绝对路径。

   const path = require('path');
   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:path.resolve(__dirname, './dist')
       },
   }
   

7. 设置mode的值，先给一个“none”，不然执行webpack命令会报警告。

   const path = require('path');
   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:path.resolve(__dirname, './dist')
       },
       mode:'none'
   }
   

8. 接下来执行npx webpack就可以了

   npx webpack
   

   执行成功后可以看到在dist文件夹下产生了一个bundle.js文件。
   

9. 想看效果同样可以在index.html页面中将bundle.js引入进来，然后在浏览器运行，最终同样打印出“hellow world”。