5.html文件打包

webpack.config.js配置

安装依赖
html-webpack-plugin
配置说明
minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
template:是要打包的html模版路径和文件名称。
const htmlPlugin= require('html-webpack-plugin');
...
    plugins: [
        new htmlPlugin({
            new HtmlWebpackPlugin({
            title: 'Custom template',
            template: './src/index.html', //指定要打包的html路徑和檔名
            filename:'../dist/index.html' ,//指定輸出路徑和檔名 
            hash: true,//給生成的 js 檔案一個獨特的 hash 值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
            showErrors:true,//webpack 編譯出現錯誤
            minify:{//對 html 檔案進行壓縮,minify 的屬性值是一個壓縮選項或者 false 。預設值為false, 不對生成的 html 檔案進行壓縮
                removeComments:true, // 去除註釋
                collapseWhitespace: true //是否去除空格
            }
        })
        })
    ],
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,340评论 4 31
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,358评论 0 5
  • 全局安装webpack 全局安装webpack会有个问题,就是当你有两个项目依赖于不同版本的webpack,就会有...
    説好的妹紙呢阅读 1,899评论 0 11
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,767评论 0 1
  • 还有一百天,十四个星期,决定每周二固定去助学,顺便把自己需要安静下来学习的东西,这几个月把它们都学习完。...
    柳娟霞阅读 125评论 0 0