webpack插件使用记录

最新推荐文章于 2021-01-30 14:06:23 发布

imdongrui

最新推荐文章于 2021-01-30 14:06:23 发布

阅读量182

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/D578332749/article/details/104664568

版权

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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;
})

imdongrui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack插件使用记录

CleanWebpackPlugin使用CleanWebpackPlugin可以在构建的时候自动清除之前构建残留的dist目录中的内容，避免手动操作。安装npm install clean-webpack-plugin --save-dev使用# webpack.config.js# 需要注意的是，CleanWebpackPlugin在引入时需要解构const {CleanWebp...
复制链接

扫一扫

专栏目录