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

时间 2019-12-02

原文原文链接

js压缩

webpack自带一个插件uglifyjs-webpack-plugin来压缩js，因此不须要再次安装，当一切都准备稳当，引入uglifyjs-webpack-plugin模块：html

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

由于它是一个插件，因此把它放在plugins里：webpack

plugins:[
    new uglify()
]

这样就完事了，执行命令webpack，压缩文件就OK了，通常不会出现问题，（可是我在实际操做中报错了，uglifyjs-webpack-plugin没有找到，因此，若是你报错了，仍是安装一下吧）git

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

打包HTML文件

首先删除dist目录下的全部文件，而后在src文件下建立index.html文件，github

/src/index.htmlweb

<!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

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

而后引入改插件：缓存

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

在plugins下，加载htmlPlugin插件babel

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

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

参考地址：jsp