继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

webpack 让打包更便捷(4)

瓦力博客
关注TA
已关注
手记 54
粉丝 26
获赞 78

获取全套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文件被自动引入进去。

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
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP