自行学习整理，边学边记，没了解过webpack的同学可以一点点看完，或许会有些帮助，不成熟的地方欢迎指正，转载请注明出处！！！
上篇我们进行了最简单的打包，但只针对js，这篇我们把html文件也打包进dist，让项目能跑起来
1，首先把html的基础框架写好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack-test</title>
</head>
<body>
</body>
</html>
不需要写script标签，因为webpack会帮我们自动填充
2，安装html-webpack-plugin模块
使webpack有能力去解析html文件
npm i html-webpack-plugin -D
3，编辑webpack.config.js
引入html-webpack-plugin模块，增加plugins启动插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = () => {
return {
// entry: path.resolve(__dirname, 'src/index.js'),
entry: path.resolve(__dirname, 'src', 'index.js'),
// entry: {
// build: [path.resolve(__dirname, 'src/index.js')]
// },
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin(),
// new HtmlWebpackPlugin({
// title: 'webpack-learn',
// template: './src/index.html'
// }),
// 创建多页面使用,配合多入口使用
// new HtmlWebpackPlugin({
// filename: 'second.html',
// title: 'webpack-learn',
// template: './src/index.html'
// }),
]
}
}
HtmlWebpackPlugin配置项注解：
title：此项可以在打包时自动输出html文件title标签中的内容，但html的title需要使用模板语法动态写入
<title><%= htmlWebpackPlugin.options.title %></title>
template：html文件模板（母版），以此文件进行打包
filename：打包后文件名
4，运行打包
npm run build-dev
然后我们就能看到dist目录多出了html文件，并且引入了打包后的js代码
5，那我们怎么能让项目跑起来呢
只需要安装webpack-dev-server，并且不用改动webpack.config.js
npm i webpack-dev-server -D
6，只要更改package.json文件，添加start命令
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "webpack --mode=development",
"build-pro": "webpack --mode=production"
},
然后终端运行命令
npm start
服务就启动了，此时对index.js文件做一些修改，可以发现也会监听文件变更，也就是做到了热更新
7，浏览器自动打开
运行start后如果不出意外可以看到服务已经启动了
截屏2020-04-28 15.53.10.png
这时可以手动在浏览器输入紫色的网址，但这么麻烦的事我们是不愿意做的
所以我们需要在package.json中再做一些简单的修改，加 --open，这样再npm start时，浏览器就自己打开了
"scripts": {
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "webpack --mode=development",
"build-pro": "webpack --mode=production"
},
到此我们已经简单的完成了把html文件打包，项目在服务环境中运行两个重要功能
8，清空打包文件夹
当我们更改了入口文件名或输出文件名时，会出现有多个打包文件存在的情况，这些多余的不需要的文件不可能一个一个手动删除，所以现在需要在运行build时先清空打包文件夹，再把打包文件写入
我们有两种方法可以实现这个效果
第一种：更改package.json的build命令
"scripts": {
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "rm -rf dist && webpack --mode=development",
"build-pro": "rm -rf dist && webpack --mode=production"
},
但如果我们的输出路径有变化，还需要再把dist改为新的文件夹名，所以我们可以使用一个插件
第二种：clean-webpack-plugin插件
先安装插件
npm i clean-webpack-plugin -D
使用方法很简单，先引入插件，这里注意引用方式
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
然后在plugins中启用插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
// new HtmlWebpackPlugin({
// title: 'webpack-learn',
// template: './src/index.html'
// }),
// 创建多页面使用,配合多入口使用
// new HtmlWebpackPlugin({
// filename: 'second.html',
// title: 'webpack-learn',
// template: './src/index.html'
// }),
]
这样就可以了，当然如果打包输出路径变了，原路径文件夹还是要手动删除的
网友评论