不知道大家记不记得,之前我们配置样式,在命令窗口中运行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文件被自动引入进去。

ssl

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

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)