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 文件夾都會重新生成文件，舊的文件會被清理掉，這樣哪些文件是實際在項目中用到的就一目瞭然了。