获取全套webpack 4.x教程，请访问瓦力博客
不知道大家记不记得，之前我们配置样式，在命令窗口中运行webpack打包然后在dist目录中打开本地index.html。在html中我们手动引入了main.js文件。当我们需要打包多个js文件时，我们手动引入js文件是非常繁琐的一件事，有没有什么配置可以帮我们做这件事呢？HtmlWebpackPlugin就可为帮助我们自动引入打包好的文件。
1.设定HtmlWebpackPlugin
HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中。
安装HtmlWebpackPlugin
yarn add html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件
module.exports = {
mode:'development',
entry:'./src/index.js',
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test:/\.scss$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'less-loader',
'postcss-loader'
]
}
]
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: '瓦力博客',
+ template: './src/index.html' //以src/index.html为编译模板
+ })
+ ],
output:{
path: path.resolve(__dirname,'dist')
}
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>!!!欢迎来到瓦力博客!!!</h1>
</body>
</html>
清空dist目录
myProject
|-dist
- |-index.html
- |-main.js //这个是打包后的js文件
|-node_modules
|-src
|-assets
|-css
|-index.css
|-less
|-index.less
|-sass
|-index.scss
|-index.html
|-index.js
|-package.json
|-webpack.config.js
|-postcss.config.js
在运行webpack之前，我们把dist目录下的文件清空，我们在src/index.html只写了dom结构，没有引入任何脚本和样式。
运行webpack
yarn run dev
在打开dist目录下面的index.html文件，就会看到webpack打包好的main.js文件被自动引入进去。
2.自动清除dist目录
我们现在使用webpack打包前都会清除dist目录下面的所有文件，目的是为了防止干扰，让我们更清楚的了解到打包后的文件结构。下面使用clean-webpack-plugin插件，该插件在webpack打包前先帮我们清除dist目录下的文件。
安装插件
yarn add clean-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件
+ const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除
module.exports = {
mode:'development',
entry:'./src/index.js',
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:1
}
},
'postcss-loader'
]
},
{
test:/\.scss$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2
}
},
'less-loader',
'postcss-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: '瓦力博客',
template: './src/index.html' //以src/index.html为编译模板
}),
+ new CleanWebpackPlugin()
],
output:{
path: path.resolve(__dirname,'dist')
}
}
运行webpack
在运行前，我们可以在dist目录下面多建几个文件，看看dist目录下面的文件是否都被删除了。
yarn run dev