Webpack4——配置自启动文件

上节介绍了如何打包一个文件，但是那种方式不符合日常开发习惯，这节介绍一下如何配置自启动文件。

1. 首先在项目的根目录新建一个webpack.config.js文件

   
   新增webpack.config.js

2. webpack.config.js的配置如下

   
   配置
   

   这里涉及到了Webpack四大核心模块中的两个：entry和output
   2.1 entry模块
   这里定义了核心的输入文件，也就是npm init时我们自定义的文件
   2.2 output模块
   定义了输出的目标文件，也就是dist目录下的app.bundle.js文件

3. 此时，在命令行输入webpak即可自动匹配webpack.config.js里的信息来打包
   Webpack打包

4. 更加符合习惯的打包方式
   修改package.json文件

   
   
   

   也就是将scripts里的内容改变为：

"scripts": {
  "dev":"webpack -d --watch",
  "prod":"webpack -p"
},

现在只需要运行 npm run dev 即可打包了（这里是自动监控变化）

npm run dev 自动打包
运行 run run prod 表示生产环境下的（压缩后）

5. 这里有一个问题，如图：

   
   problems
   

   此工具的名称叫：html-webpack-plugin