webpack入门（四）插件管理

摘要：So far we've manually included all our assets in our index.html file, but as your application grows and once you start using hashes in filenames and outputting multiple bundles, it will be difficult to keep managing your index.html file manually. However, a few plugins exist that will make this process much easier to manage.

大概意思是说到目前为止，已经手动的将一些资产添加到了index.html文件中，但是手动来操作是有问题的，因为一旦当你的项目或者应用变得非常大，一旦以哈希名来命名文件并且要输出多个模块时候，这是手动的管理index.html将变得非常困难。这时候就需要相应的插件来帮我们来管理，使其管理起来跟容易简单。

• 首先简化我们之前的项目结构为如下：

  
  
  

  22.png
  
  

  新建一个dist目录，将index.html文件移动到dist目录下。具体文件的内容如下：

src/print.js:

export default function printMe() {
  console.log('I get called from print.js!');
}

src/index.js

import _ from 'lodash';
import printMe from './print.js';

 function component() {
   var element = document.createElement('div');
  var btn = document.createElement('button');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;
  element.appendChild(btn);
   return element;
 }

 document.body.appendChild(component());

dist/index.html:

webpack.config.js:

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

运行npm run build,在浏览器打开dist下的index.html，会看到hello webpack的字样，这就是相当于手动来添加资产到index.html中的，这种方式在以后的开发中我们也不用，接下来需要进行更改， 我们将添加我们的src / print.js作为新的入口点（print），并且我们也会更改输出，以便它根据入口点名称动态生成包名称，如下：

webpack.config.js:

  const path = require('path');

  module.exports = {
   entry: { // 新怎加一个构建入口
     app: './src/index.js', 
     print: './src/print.js'
   },
    output: {
     filename: 'bundle.js',
     filename: '[name].bundle.js', // 通过name动态的生成输出文件名
      path: path.resolve(__dirname, 'dist')
    }
  };

接下来更改该dist/index.html

运行npm run build,有同样的效果，这时候在dist目录下还会生成如下的结构：

22.png

其中红色的是根据名字动态生成的，粉色的是之前生成的。很明显这样是有问题的，因为当每次更换文件名的时候他都会重新生成，而且之前生成的仍旧保留，合理的话应该是再生成好后将之前没用的都清除掉，当然这是一件困难的事，但是webpack提供了相关插件供我们使用。
接下来用插件来进行构建：

• 首先安装插件并调整配置，步骤如下：

安装插件
npm install --save-dev html-webpack-plugin

webpack.config.js:

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
   plugins: [
     new HtmlWebpackPlugin({ // 该插件用来生成一个.html文件
       title: 'Output Management'
     })
   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

在运行npm run build之前将dist目录删掉，运行完毕后会生成dist目录，里面有根据文件生成的文件，还会为我们生成一个index.html文件，该文件是由HtmlWebpackPlugin插件来完成的。当然HtmlWebpackPlugin是来生成html文件的，在生成的过程中并不会清除旧文件，要清除旧文件就需要用到另一个插件clean-webpack-plugin ，首先需要安装插件

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

在webpack.config.js添加如下：

const CleanWebpackPlugin = require('clean-webpack-plugin');
在plugins选项中添加如下：
 new CleanWebpackPlugin(['dist']),

这样运行npm run bulid就会在dist目录下生成最新的打包文件，并会清除旧的无用的文件。

• 以上了解了CleanWebpackPlugin ，HtmlWebpackPlugin两个插件的基本使用，接下来了解一些常用的插件
  （1）WebpackManifestPlugin，该插件能够在项目根目录生成一份## manifest.json的文件，通过该文件的映射关系可以让我们知道webpack是如何追踪所有模块并映射到输出bundle中的。大致的使用方法如下：

1. 安装插件：npm install --save-dev webpack-manifest-plugin
2. 在 webpack.config.js中引入，大致如下：

var ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
   // ...
   plugins: [
     new ManifestPlugin() // ManifestPlugin方法可以接受一些选项参数options,如 new ManifestPlugin(options)
   ]
};

3.可选参数如下：

options.fileName 表示要生成文件的名称，默认为manifest.json
options.publicPath 表示生成映射文件的路径，默认为output.publicPath，字符串类型
options.basePath 
options.writeToFileEmit
还有其他的参数见官网https://github.com/danethurber/webpack-manifest-plugin

（2）MiniCssExtractPlugin，该插件将CSS解压到单独的文件中。 它为每个包含CSS的JS文件创建一个CSS文件。 它支持按需加载CSS和SourceMaps。它建立在新的webpack v4功能（模块类型）之上，并要求webpack 4工作。大致的使用方法如下：

1. 安装插件 npm install --save-dev mini-css-extract-plugin
2. 在 webpack.config.js中引入，大致如下：

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 var ManifestPlugin = require('webpack-manifest-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module.exports = {
   entry: {
     app: './src/index.js',
     hh: './src/hh.js',
   },
  plugins: [
       new CleanWebpackPlugin(['dist']),
       new ManifestPlugin(),
    new HtmlWebpackPlugin({ // 该插件用来生成一个.html文件
      title: 'Output Management'
    }),
    new MiniCssExtractPlugin({ // 提取css插件
     filename: "[name].css",
     chunkFilename: "[id].css"
   })
  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist')
   },
  module: {
   rules: [
     {
       test: /\.css$/,
       use: [
         MiniCssExtractPlugin.loader, // 重要，有对应的这个loader才能从js中提取css
         "css-loader"
       ]
     }
   ]
 }
 };

如果src/index.js中有 这样的css，如import './style/index.css'，name打包后对应的css就可以被提取到单独的css文件中，不提取的话css会被打包到js文件中。
运行npm run build 就会在输出目录提取出一个app.css。因为我的webpack配置中对应index.js的输出名为app。输入的css正好是filename: "[name].css",即app.css.

其他常用的插件见官网https://webpack.js.org/plugins/