webpack——管理输出(四)

最新推荐文章于 2021-09-28 17:22:03 发布

我是一个脸

最新推荐文章于 2021-09-28 17:22:03 发布

阅读量163

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_20464593/article/details/106302208

版权

webpack 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1.预先准备
首先，让我们调整一下我们的项目：
在这里插入图片描述
我们在 src/print.js 文件中添加一些逻辑：

function print() {
    console.log("haha!!!")
}
export default print

并且在 src/index.js 文件中使用这个函数：
src/index.js

import print from './print'

var dom = document.getElementById("root")
var btn = document.createElement('button')
btn.innerHTML = "click me"
btn.onclick = print
dom.appendChild(btn)

我们还要更新 dist/index.html 文件，来为 webpack 分离入口做好准备：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理输出</title>
    <script src="./print.bundle.js"></script>
</head>
<body>
    <div id="root"></div>
    <script src="./app.bundle.js"></script>
</body>
</html>

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

const 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 bundle，

katedeMacBook-Air:lesson0523_new kate$ npm run bundle

> lesson0523_new@1.0.0 bundle /Users/kate/Documents/桂电学校学习/2020vue项目整理/webpack4.0(幕客)/lesson0523_new
> webpack

Hash: dc9f4aaabe38a680862b
Version: webpack 4.43.0
Time: 132ms
Built at: 2020-05-23 16:34:53
          Asset       Size  Chunks             Chunk Names
  app.bundle.js   1.15 KiB    0, 1  [emitted]  app
print.bundle.js  996 bytes       1  [emitted]  print
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
[0] ./src/print.js 68 bytes {0} {1} [built]
[1] ./src/index.js 181 bytes {0} [built]

我们可以看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮时会发生什么。
在这里插入图片描述

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

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

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'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

在我们构建之前，你应该了解，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。让我们在执行 npm run bundle

你在代码编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

但这里有个问题:
重新打开index.html,并没有出现原本的click me按钮
原因是我们在原本的index.html中添加了<div id="root"></div>
而新生成的index.html文件中并没有
所以在使用HtmlWebpackPlugin时,可以添加一个index.html模版,在模版中添加<div id="root"></div>
在src目录下新建index.html(模版):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html模版</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

重新执行 npm run bundle
到这里,页面又重新出现click me 按钮~

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

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。
clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。

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

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'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
    ]
}

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

我是一个脸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack——管理输出(四)

1.预先准备首先，让我们调整一下我们的项目：我们在 src/print.js 文件中添加一些逻辑：function print() { console.log("haha!!!")}export default print并且在 src/index.js 文件中使用这个函数：src/index.jsimport print from './print'var dom = document.getElementById("root")var btn = document.cr
复制链接

扫一扫

专栏目录