webpack学习之路（三）

输出管理：

目前为止我们都是手动地在index.html中引入所有资源，但是一应用开始渐渐变大，在文件名中使用哈西并输出为多个bundle的时候，项目也会变得难以管理了。因此一些插件就诞生了。

准备：

调整一下项目结构：

project

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

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

  <!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为新的入口，同时也要修改出口配置，以便动态产生输出的包名：

webpack.config.js

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

跑起来：

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

现在再跑一遍的话你应该只看得到本次构建产生的输出文件了。

Manifest:

通过manifest，webpack可以跟踪到模块映射到输出的过程，有时间的话可以研究下manifest，用WebpackManifestPlugin可以把manifest数据输出到json文件中。

webpack学习之路（三）

猜你喜欢