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

    参考地址:

  • 相关阅读:
    C#判断网络链接状态
    C# 创建临时文件(转帖)
    C# 很久以前几个常用类
    正则附表
    如何判断WebBrowser浏览器网页加载完成
    控件阴影
    C# 使用WM_COPYDATA传输数据(两个窗体间通信)
    C# 调用POST请求
    改变无边框窗体的尺寸大小和移动无边框窗体
    IT学习网站
  • 原文地址:https://www.cnblogs.com/hawk-zz/p/7884350.html
Copyright © 2011-2022 走看看