webpack3学习3--管理输出

亦凉 2022-06-13 10:50 169阅读 0赞

到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)\]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

根据[webpack3学习2–管理资源][webpack3_2]的操作，这时我们会有一个小工程了。但是为了方便学习webpack的管理输出，这里会采用[webpack3学习1–开始][webpack3_1]生成的工程demo1。

# 预先准备 #

首先在src目录增加print.js

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 文件，来为 webpack 分离入口做好准备：  
dist/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Output Management</title>
        <script src="./print.bundle.js"></script>
    </head>
    <body>
    <script src="./app.bundle.js"></script>
    </body>
    </html>

现在调整配置。我们将在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点名称动态生成 bundle 名称：  
webpack.config.js

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

运行

npm run build
    http-server

浏览器访问[http://localhost:8080/dist/][http_localhost_8080_dist] ，点击按钮，即可看到控制台打印。  
我们可以看到，webpack 在dist目录生成 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。

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

# 设定 HtmlWebpackPlugin #

首先安装插件，并且调整 webpack.config.js 文件：

cnpm install --save-dev html-webpack-plugin

调整 webpack.config.js 文件：

在构建之前，你应该了解，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。让我们看下在执行 npm run build 后会发生什么。  
如果你在代码编辑器中 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Output Management</title>
      </head>
      <body>
      <script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
    </html>

# 清理 /dist 文件夹 #

你可能已经注意到，由于过去的操作和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

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

clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。

cnpm install clean-webpack-plugin --save-dev

webpack.config.js配置CleanWebpackPlugin

现在执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件！

本文源代码地址：[https://github.com/wu-boy/webpack-demo][https_github.com_wu-boy_webpack-demo]，demo3目录。

> 剩下学习内容暂时不更新了，webpack官网都有详细教程，可供学习。

参考资料：  
1.[webpack中文网][webpack]

[webpack3_2]: http://blog.csdn.net/wu_boy/article/details/74380149
[webpack3_1]: http://blog.csdn.net/wu_boy/article/details/74372172
[http_localhost_8080_dist]: http://localhost:8080/dist/
[https_github.com_wu-boy_webpack-demo]: https://github.com/wu-boy/webpack-demo
[webpack]: https://doc.webpack-china.org/guides/output-management/