webpack 中的插件(Plugins)

为什么要使用插件?

它是webpack中的一个重要功能,主要是用来提高你的开发效率,在webpack中用来扩展功能,它在整个构建过程中生效。既然它是插件,那肯定不止一个,所以当你需要某个插件的时候,要先安装在去使用,现在我就给大家介绍几个插件常用的插件吧。

HtmlWebpackPlugin

它会在你项目打包完成后,自动生成一个 html的文件,并把你自己的模板引入该html文件中。

1. 使用它之前要先安装,命令行输入命令 :

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

然后去package.json中检查一下安装好没,如下图有箭头那一行就算成功了:

2. 在项目根组件创建一个 public文件夹,里面创建一个idnex.html文件,再创一个src文件夹,里面创建一个index.js文件

// public/index.html
// src/index.js

3. 在webpack.config.js配置(数组格式)

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	mode: 'production',
	entry: {
    	'index': './src/index.js',
  	},
  	output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
	plugins: [
	    new HtmlWebpackPlugin({
	      title: 'My App',
	      filename: 'app.html',
	      template: './public/index.html'
	    }),
  ]
}

名称	类型	描述
title	String	用来生成HTML的标题
filename	String\Function	要生成的HTML文件名(打包后的文件名)
template	String	webpack的相对或者绝对路径(原文件位置)

这里的title在public下的index.html文件中 <** title>标签中使用,打包好的文件里面的title就会变成上边配置的 My App
<%=htmlWebpackPlugin.options.title%>

当然还有其它的配置,因为太多就不给大家一一介绍了,感兴趣的可以去官网了解。

4. 打包项目

npm start

5. 去打包好的文件运行查看效果

// dist/app.html

这都是它自动生成的模块,不需要手动引入嗷!

clean-webpack-plugin

它会在你项目打包之前,把你之前打包的项目个给删除,然后在重新打包一份。

1. 安装

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

跟上面一样,去package.json里面查看安装成功没

2. 使用,去webpack.config.js里面配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
	...,
  plugins: [
    ...,
    new CleanWebpackPlugin(),
  ]
}

3. 写完之后重新打包

npm start

mini-css-extract-plugin

将css打包到一个单独的文件,配合css-loader使用, 它支持按需加载 css 和sourceMap 注意 webpack 4 +版本才可以使用

1. 安装命令,然后去package.json检查

npm install --save-dev mini-css-extract-plugin

2. src文件下面创一个css文件

// src/aa.css
body{
	background-color:cyan;
}

3. webpack.config.js中配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
	...,
	module:{
		rules:[
			{
				test: /\.css$/i,
				 use: [
           			 MiniCssExtractPlugin.loader,
          			'css-loader'
			}
		]
	},
	plugins: [
	    ...,
	    new MiniCssExtractPlugin({
    		filename: './public/css/app.css'
    	}),
  ]
}

4. 打包项目,然后在打包好的app.html中运行,如果你的页面变色就证明成功了,比如我这里:

npm start

sourceMap

它本质上是一个信息文件,是源代码和生产代码的映射,可以通过webpack中的devtool属性使用sourceMap,它会自动生成一个 .map的文件。

1. webpack.config.js文件中配置

module.exports = {
	...,
 	devtool: 'source-map',
}

2. 打包项目,并查看

npm start

WebpackDevServer

它仅用于开发,是一个小型的 服务器

1. 安装并检查

npm install webpack-dev-server --save-dev

2. package.json的script中配置运行命令

{
	...,
	"scripts": {
		"server":"webpack server"
		// 有的是"webpack server --open"
	}
}

3. 在webpack.config.js中配置

module.exports = {
	...,
	devServer: {
	  	// 生成的虚拟目录路径
	  	contentBase: "./dist",
	  	//  打开网站时所在的页面
    	index: 'app.html',
	  	// 自动开启浏览器
	  	open: true,
	  	// 端口
	  	port: 8080
	}
}

名称	类型	描述
contentBase	Boolean\String\Number	告诉服务器从哪儿提取内容(建议采用绝对路径)
filename	String	打包后的文件名
hot	Boolean	启动热更新
hotOnly	Boolean	启动 HMR(Hot Module Replacement) 不生效，也不去刷新整个页面(选择开启)
index	String	打开网页显示的名字
open	Boolean\String\Object	告诉服务器默认打开服务器
port	Number	端口号

4. 运行

npm run server

然后会自动弹出你之前打包好的那个页面

Hot Module Replacement

热更新,它不需要手动刷新页面,它可以实现局部刷新,页面不闪烁。

1. 在webpack.config.js中配置

module.exports = {
  	...,
  	devServer: {
	  	// 生成的虚拟目录路径
	  	contentBase: "./dist",
	  	//  打开网站时所在的页面
	  	index:'app.html'
	  	// 自动开启浏览器
	  	open: true,
	  	// 端口
	  	port: 8080,
	  	// 开启热更新
	  	hot:true,
	  	// 即使 HMR(Hot Module Replacement) 不生效，也不去刷新整个页面(选择开启)
	    hotOnly:true,
	}
}

2. 运行

npm run server

总结

使用插件主要就是为了提高开发效率,要严格注意区分大小写,这些插件都是大同小异的东西,会其中一个,其他的都不是什么大事,就是配置的属性不同,主要就是注意版本兼容问题。