webpack學習之路（三）

時間 2019-11-18

標籤 webpack 學習之路简体版

原文原文鏈接

輸出管理：

　　目前爲止咱們都是手動地在index.html中引入全部資源，可是一應用開始漸漸變大，在文件名中使用哈西並輸出爲多個bundle的時候，項目也會變得難以管理了。所以一些插件就誕生了。html

準備：

　　調整一下項目結構：node

projectwebpack

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

src/print.jsweb

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

src/index.jsnpm

  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.htmljson

  <!doctype html>
  <html>
    <head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>

　　在配置中加入src/print.js爲新的入口，同時也要修改出口配置，以便動態產生輸出的包名：app

webpack.config.jsui

  const path = require('path');

  module.exports = {
-   entry: './src/index.js',
+   entry: {
+     app: './src/index.js',
+     print: './src/print.js'
+   },
    output: {
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

跑起來：spa

...
          Asset     Size  Chunks                    Chunk Names
  app.bundle.js   545 kB    0, 1  [emitted]  [big]  app
print.bundle.js  2.74 kB       1  [emitted]         print
...

　　如今也確實生成了print.bundle.js和app.bundle.js文件，和在index.html中引入的名字同樣。可是若是咱們改了某個入口的名字，或者加了一個入口的話，咱們從新構建後的出口文件的名字和數量就會改變，index.html中的引入是不會自動變化的，可是HtmlWebpackPlugin這個插件能夠幫咱們幹這件事。插件

設置HtmlWebpackPlugin:

　　仍是老規矩：

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')
    }
  };

　　在構建以前你須要知道HtmlWebpackPlugin會產生本身的index.html，即便dist目錄下已經有了一個，也就是它會替換以前的index.html，跑起來試試：

...
           Asset       Size  Chunks                    Chunk Names
 print.bundle.js     544 kB       0  [emitted]  [big]  print
   app.bundle.js    2.81 kB       1  [emitted]         app
      index.html  249 bytes          [emitted]
...

　　如今打開dist文件下的index.html文件會發現已是插件幫你加好了入口的文件了。固然有時間能夠看看html-webpack-plugin和html-webpack-template瞭解更多的知識。

清理/dist文件夾：

　　隨着項目變得愈來愈複雜dist文件夾也會變得愈來愈雜亂，webpack會把輸出文件全放到dist目錄下但不會跟蹤這些文件是否還被項目用到了。clean-webpack-plugin能夠幫助解決這個問題：

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

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')
    }
  };