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.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
# 使用template指定的模板,生成的index.html就是参照模板来的
template: 'index.ejs',
# 向模板中传递参数
title: '没错,我就是标题'
})
]
}
<!--index.ejs-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!--构建生成的index.html,默认放在dist目录下-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>没错,我就是标题</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/build-05a85e5c705d85ed3aa5.js"></script>
</body>
</html>
webpack项目中插件形式引入Jquery
安装Jquery
npm install jquery --save
引入及使用
# webpack.config.js
# 将jquery设置为可用的插件,设置后全局可引用,这样设置使用$和JQuery都可以使用jquery
module.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;
})