webpack 4 笔记三 输出管理

接下来的管理输出，不需要使用上一节中使用到的资源文件，所以需要先将上一节中加载css、图片、字体、数据的文件与代码行做一个清理。

回退处理

在上一笔记中，基本根据官方文档完成了 webpack 的局部安装与加载 css、图片、字体、数据，接下来因为无需使用到上一节中使用到的资源，所以需要清除之前的文件
src

• comci.woff
• love.jpg
• style.css
• data.xml
  webpack.config.js

...
-   module: {  //配置所有第三方 loader 模块
-     rules: [  //第三方模块的匹配规则
-       { test: /\.css$/, use: ['style-loader','css-loader'] },
-       { test: /\.(png|svg|jpg|gif)$/,use: ['file-loader'] },
-       { test: /\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader'] }，
- 	    { test: /\.(csv|tsv)$/,use: ['csv-loader'] },
-       { test: /\.xml$/,use: ['xml-loader'] }
-    ]
-   }
...

src/index.js

  import _ from 'lodash';
-  import './style.css';
-  import Icon from './icon.png';
-  import Data from './data.xml';

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

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-    element.classList.add('hello');

-    // Add the image to our existing div.
-    var myIcon = new Image();
-    myIcon.src = Icon;
-    element.appendChild(myIcon);
-    console.log(Data);

    return element;
  }
  document.body.appendChild(component());

使用 HtmlWebpackPlugin 与 clean-webpack-plugin 管理输出

目前为止，添加资源的方法主要是通过手动添加，这样是体现不出 webpack 的高效作用滴，因为

更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的 index.html 文件仍然会引用旧的名字。

即是说当我们修改上面的 webpack.config.js 的入口起点名称后

...
module.exports = {
...
  entry: {
    app: './src/index.js',
    print111: './src/print.js' //这里将 print 改为 print111
  },
...
}

会重新生成一个文件，

但此时 index.html 还是引用 print.bundle.js ，要导入print111.bundle.js 的话，需要手动导入。一两个还没什么，程序大了之后就会很麻烦！

而通过 HtmlWebpackPlugin ，则会在每次重新构建后生成全新的 index.html 文件，把原来的替换掉

这样，无论是更改了原来的入口起点名称还是新添加了名称，构建后所有的 bundle 会自动添加到 html 中。
一、安装

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({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

清理 /dist 文件夹

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

clean-webpack-plugin 正是为此而生
一、安装

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

二、在 webpack.config.js 中配置

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

这样，在每次重新构建后，抛出错误

什么原因呢？
https://github.com/johnagan/clean-webpack-plugin

因为插件版本的更新，新版的传参与旧版并不一致，新版（当前 “^2.0.1”）版本的参数仅一个对象。
所以该插件正确使用方法为

// An highlighted block
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(), //即不传任何参数
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

运行 npm run build ， dist 文件夹都会重新生成文件，旧的文件会被清理掉，这样哪些文件是实际在项目中用到的就一目了然了。