webpack4 入门（二）

一、管理输出

1.多入口配置

entry: {
    index1: './src/index.js',
    index2: './src/index2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

上面的配置npm run build之后会生成index.bundle.js和index2.bundle.js， 然后在index.html中添加js引用

2.设定 HtmlWebpackPlugin

HtmlWebpackPlugin会生成新的index.html，替换掉之前旧的index.html

1）安装HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

2）配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management'
     })
   ],

3.清理 /dist 文件夹

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。

1）安装clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

2）配置webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
     new CleanWebpackPlugin(['dist']),
    ],

参考：

1.https://www.webpackjs.com/guides/output-management/