zoukankan      html  css  js  c++  java
  • webpack 3.X学习之JS压缩与打包HTML文件

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

    参考地址:

  • 相关阅读:
    1.linux6 x86-64 RPM包安装mysql5.7.20
    zepto中的animate
    java开发环境配置
    sql按相似度模糊查询实例
    下载方法收集
    myeclipseBlue6.5破解,运行即可得到key
    浮点数特点
    java进制之间的转换
    java小算法
    Java中的DateFormat用法
  • 原文地址:https://www.cnblogs.com/hawk-zz/p/7884350.html
Copyright © 2011-2022 走看看