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

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

作者: hawkzz | 来源:发表于2017-10-16 17:13 被阅读0次

    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模板路径和文件名称;

    参考地址:

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/xlcluxtx.html