webpack 3.X学习之JS压缩与打包HTML文件

最新推荐文章于 2023-02-19 16:53:08 发布

qq_45670012

最新推荐文章于 2023-02-19 16:53:08 发布

阅读量295

点赞数

分类专栏：前端文章标签： webpack

原文链接：https://www.mk2048.com/blog/blog.php?id=hbib0j2kcbjb&title=webpack+3.X%E5%AD%A6%E4%B9%A0%E4%B9%8BJS%E5%8E%8B%E7%BC%A9%E4%B8%8E%E6%89%93%E5%8C%85HTML%E6%96%87%E4%BB%B6

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

js压缩

webpack自带一个插件uglifyjs-webpack-plugin来压缩js，所以不需要再次安装，当一切都准备妥当，引入uglifyjs-webpack-plugin模块：

const uglify = require('uglifyjs-webpack-plugin');

因为它是一个插件，所以把它放在plugins里：

plugins:[
    new uglify()
]

这样就完事了，执行命令webpack，压缩文件就OK了，一般不会出现问题，（但是我在实际操作中报错了，uglifyjs-webpack-plugin没有找到，所以，如果你报错了，还是安装一下吧）

npm install uglifyjs-webpack-plugin --save-dev

打包HTML文件

首先删除dist目录下的所有文件，然后在src文件下创建index.html文件，

/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div id="title"></div>
</body>
</html>

配置webpack.config.js文件，安装html-webpack-plugin插件

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

然后引入改插件：

const htmlPlugin =  require('html-webpack-plugin');

在plugins下，加载htmlPlugin插件

plugins:[
    new uglify(),
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:'./src/index.html'
    })
]

minify：是对html文件进行压缩， removeAttributeQuotes是去掉属性的双引号；
hash：为了开发中js有缓存效果，加入hash，可以有效避免js缓存；
template：需要打包的HTML模板路径和文件名称；

参考地址：

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_45670012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 3.X学习之JS压缩与打包HTML文件

js压缩 webpack自带一个插件uglifyjs-webpack-plugin来压缩js，所以不需要再次安装，当一切都准备妥当，引入uglifyjs-webpack-plugin模块： const...
复制链接

扫一扫