学习webpack系列之三 ---- （输出管理）

最新推荐文章于 2022-08-05 09:53:17 发布

vk阿木

最新推荐文章于 2022-08-05 09:53:17 发布

阅读量171

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/LizequaNNN/article/details/120524219

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习webpack系列之三 ---- （输出管理）

零、前言

差不多就要国庆假期啦！正处于金九银十的你有没有找到自己心仪的工作呢！我的日常就是跟下面差不多~

总之希望大家都能过一个轻松惬意的国庆节！接下来进入正题。

到目前为止，我们都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始在文件名中使用 hash 并输出多个 bundle，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。
这篇文章继续沿用上一篇文章（管理资源）的代码示例。

首先整理一下目录，新增print.js文件（用做第二入口，至于为什么，且往下看），具体项目路径如下：

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

print.js代码：

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

一、手动管理输出

在配置webpack的过程中，一旦我们的程序新增需求（print.js），需要输出多个bundle，我们都需要修改入口以及出口部分的代码，现在让我们更改webpack.config.js里面的部分的代码：

 const path = require('path');

 module.exports = {
  entry: {
     index: './src/index.js',
     print: './src/print.js',
  },
   output: {
     filename: '[name].bundle.js', // 打包的文件名
     path: path.resolve(__dirname, 'dist') // 打包的目录
   }
 };

原来的index.js里面再键入以下代码：

import _ from 'lodash';
import printMe from './print';

function component(params) {
    const element = document.createElement('div');
    const btn = document.createElement('button');

    // loadash(目前通过一个script引入) 对于执行这一行是必须的
    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里面引入我们即将打包的bundle ：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>管理输出</title>
    <script src="./print.bundle.js"></script>
</head>

<body>
    <script src="./index.bundle.js"></script>
</body>

</html>

接下来运行我们之前配置好的打包命令：

npm run build

然后运行到浏览器，查看页面：
手动管理输出效果
可以看见我们要的点击效果已经出来了，打包是成功的。

可是，我们需要注意一个问题。如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的入口，会发生什么？会在构建时重新命名生成的 bundle，但是我们的 index.html 文件仍然引用旧的名称，也不会引入新的bundle，难道我们输出的index.html每次都需要我们手动去配置吗？

很显然不是的，这有悖webpack的设计初衷，并没有达到自动化打包的目的，例如：

我们将webpack.config.js里面entry的print改成printer，重新打包一次，让我们看一下结果：

entry: {
    index: './src/index.js',
    printer: './src/print.js'
},

可以看见浏览器中，依旧还是引用print.bundle.js，并没有引用到我们最新打包的printer.bundle.js

这不是我们想要的自动化打包。那我们如何才能做到自动化打包呢？接着往下看。

二、插件管理输出

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的loader。

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签自动引入你所有 webpack生成的 bundle。只需安装，添加该插件到你的 webpack 配置中，如下所示：

HtmlWebpackPlugin扩展插件的说明文档：HtmlWebpackPlugin

先用npm安装插件：

npm install --save-dev html-webpack-plugin

接着更改一下webpack.config.js里面的配置：

const path = require('path');
// 这里引入插件包
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 这里按照顺序，entry入口 -> plugins插件 -> output出口，其实没有特别的含义，按照顺序会比较好理解一点

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        printer: './src/print.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '管理输出123' // HTML5里面的title
        })
    ],
    output: {
        filename: '[name].bundle.js', // 打包的文件名
        path: path.resolve(__dirname, 'dist') // 打包的目录
    }
};

接着，其他什么都不用做，让我们用命令行打包一下：npm run build
引用插件的效果

可以看见，index.html里面的bundle自动引入，名称也自动修改，我们之前修改的printer，已经被自动打包引入到页面当中了，而且，代码也进行了部分的压缩。

这才是我们想要的自动化打包配置。

三、自动清理文件

现在我们看一下dist文件夹：

自动清理
我们修改之前的bundle包还继续存在着，如果我们废弃的包很多，就会造成我们的项目非常的臃肿，所以，我们需要配置一下输出的时候，让项目只输出我们当前配置里面的资源：

output: {
    filename: '[name].bundle.js', // 打包的文件名
    path: path.resolve(__dirname, 'dist'), // 打包的目录
    clean: true // 自动清理旧bundle
}

现在重新运行一下命令行指令看一下效果： npm run build

clean自动清理

print.bundle.js已经消失不见，剩下的就是我们在入口那里配置的两个bundle。

相信通过本篇文章，你已经对webpack的输出管理有一定的了解了，这些应该足以用来应付一般项目的配置了。

有人可能会有疑问，为什么不挑webpack在项目当中的配置来码一篇文章呢？你想，我把项目的配置拿出来说，是很简单。但是大家的阅读效率和知识面真的没有很高效，这样子分模块，可以知道webpack来龙去脉~学的也多，不是吗？

希望大家多多关照和点赞，新人不易！谢谢大家~

vk阿木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习webpack系列之三 ---- （输出管理）

学习webpack系列之三 ---- （输出管理）零、前言差不多就要国庆假期啦！正处于金九银十的你有没有找到自己心仪的工作呢！我的日常就是跟下面差不多~总之希望大家都能过一个轻松惬意的国庆节！接下来进入正题。到目前为止，我们都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始在文件名中使用 hash 并输出多个 bundle，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。这篇文章继续沿用上一篇文章
复制链接

扫一扫