webpack学习之路（三）

最新推荐文章于 2025-09-11 09:44:20 发布

weixin_30372371

最新推荐文章于 2025-09-11 09:44:20 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/suqin-marker/p/9890954.html

本文讲解如何使用Webpack进行有效的输出管理，包括动态生成输出包名、利用HtmlWebpackPlugin自动更新引用，以及使用clean-webpack-plugin清理旧的输出文件。

输出管理：

　　目前为止我们都是手动地在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')
    }
  };