webpack实践之路（五）：管理输出

最新推荐文章于 2021-12-03 00:07:29 发布

白小宇

最新推荐文章于 2021-12-03 00:07:29 发布

阅读量266

点赞数

分类专栏： webpack web前端文章标签： webpack clean-webpack-plugin html-webpack-plugin

本文链接：https://blog.csdn.net/b954960630/article/details/85320794

版权

web前端同时被 2 个专栏收录

121 篇文章 4 订阅

订阅专栏

webpack

9 篇文章 1 订阅

订阅专栏

一、预先准备

首先我们更改目录结构并设置一个多入口、多出口的Dome。
(项目的搭建以及webpack.config.js的配置跟前面一样，请参考：快速上手的Demo)

目录结构：
在这里插入图片描述

（1）src/print.js：

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

（2）src/index.js：

import printMe from './print.js';

function component() {
	var element = document.createElement('div');
	element.innerHTML = 'Hello webpack';

	var oButton = document.createElement('button');
	oButton.innerHTML = 'click me and check console!';
	oButton.onclick = printMe;
	element.appendChild(oButton);

	return element;
}

document.body.appendChild(component());

（3）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'),
	}
}

（4）dist/index.html：

<!doctype html>
<html>
<head>
	<title>Output Management</title>
	<script src="./print.bundle.js"></script>
</head>
<body>
	<script src="./app.bundle.js"></script>
</body>
</html>

（5）执行： npm run build
然后看到生成如下：
在这里插入图片描述

可以看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮后控制台会输出：I get called from print.js

二、 HtmlWebpackPlugin

接着上面，假如我们把webpack.config.js中叫app的入口改名为app2 或干脆多加了一个全新的入口test:'./src/my.js'，会发生什么？你会发现生成的包被重命名在dist中，因而我们还需要将./dist/index.html 中引用的旧名字手动更改为新的名字，好麻烦！！

dist文件夹中都是打包编译后的文件，我们根本不想碰它，怎么办？用插件HtmlWebpackPlugin 来解决吧！

（1）安装插件

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

（2）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'),
	}
}

（3）运行

在我们构建之前，你应该了解，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成新的 index.html 文件，并把我们的原来index.html替换调，之后再把所有的 bundle 自动添加到新的index.html 中。

让我们看下在执行npm run build后会发生什么：
在这里插入图片描述
如果你在代码编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。(HtmlWebpackPlugin会访问webpack.config.js的entry列表，然后根据我们命名的值，自动生成index.html并插入入口js)

eg: 我们在 webpack.config.js中配置了两个入口文件（test.js、test2.js）,并向HtmlWebpackPlugin中传入title属性
在这里插入图片描述
然后打包编译后，dist文件夹会生成内容如下的index.html文件（页面名称即HtmlWebpackPlugin中传入的title值）

如果你还想用HtmlWebpackPlugin 在index.html中加入link、meta等标签，
请参考：html-webpack-template

有了HtmlWebpackPlugin，你只要专注于src和webpack.config.js就好了，即使dist文件夹是空的也无妨，npm run build就好了。

三、清理 /dist 文件夹

你会发现在以前进行若干工作后我们的 /dist 文件夹会相当杂乱，里面有些文件在项目中根本用不到，所以在每次构建前清理 /dist 文件夹是比较推荐的做法。我们用clean-webpack-plugin来完成这个需求。

（1）安装插件

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

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

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

白小宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack实践之路（五）：管理输出

一、预先准备首先我们更改目录结构并设置一个多入口、多出口的Dome。(项目的搭建以及webpack.config.js的配置跟前面一样，请参考：快速上手的Demo)目录结构：（1）src/print.js：export default function printMe() { console.log('I get called from print.js');}（2）src/i...
复制链接

扫一扫