CleanWebpackPlugin

使用CleanWebpackPlugin可以在构建的时候自动清除之前构建残留的dist目录中的内容，避免手动操作。

安装

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

使用

# webpack.config.js# 需要注意的是，CleanWebpackPlugin在引入时需要解构const {
   CleanWebpackPlugin} = require('clean-webpack-plugin')module.exports = {
   	plugins: [		new CleanWebpackPlugin()	]}

CleanWebpackPlugin默认会去清除dist目录下的内容，当然CleanWebpackPlugin还支持很多设置项，暂时没有用到，不做深入研究了。

HtmlWebpackPlugin

HtmlWebpackPlugin可以为我们动态生成index.html，当构建的js使用了chunkhash这些动态的值避免缓存时，HtmlWebpackPlugin会动态地为我们引入每次生成的最新的js，从而避免手动去管理index.html。

安装

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

使用

# webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {
   	plugins: [		new HtmlWebpackPlugin({
               # 使用template指定的模板，生成的index.html就是参照模板来的			template: 'index.ejs',                        # 向模板中传递参数            title: '没错，我就是标题'		})	]}


   			
   		<%= htmlWebpackPlugin.options.title %>


   			
   		没错，我就是标题

webpack项目中插件形式引入Jquery

安装Jquery

npm install jquery --save

引入及使用

# webpack.config.js# 将jquery设置为可用的插件，设置后全局可引用，这样设置使用$和JQuery都可以使用jquerymodule.exports = {
   	plugins: [		new webpack.ProvidePlugin({
   			jQuery: "jquery",			$: "jquery"		}),	]}

# 在js中直接使用上述引入的插件即可，$与jQuery都可以$.ajax({
       type: 'POST',    url: url,    data: sendData,    contentType: 'application/json; charset=UTF-8',    dataType: 'json',    error: errorFunction}).then(thenSucHandler, thenFialHandler)    .then((data) => {
       return data;})jQuery.ajax({
       type: 'POST',    url: url,    data: sendData,    contentType: 'application/json; charset=UTF-8',    dataType: 'json',    error: errorFunction}).then(thenSucHandler, thenFialHandler)    .then((data) => {
       return data;})

转载地址：http://qptlf.baihongyu.com/

你可能感兴趣的文章