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文件的更多相关文章

  1. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  2. webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  3. webpack配置：css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  4. 手把手教你webpack、react和node.js环境配置（上篇）

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  5. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  6. webpack之基础学习

    webpack工作原理: 通过一个入口文件,main.js开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件. Webpack的核心原理 ...

  7. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

  8. webpack 3.X学习之多页面打包

    简介 我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢? 单页面打包 我们知道要打包 ...

  9. 学习rollup.js模块文件打包

    学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...

随机推荐

  1. (转)Python爬虫利器一之Requests库的用法

    官方文档 以下内容大多来自于官方文档,本文进行了一些修改和总结.要了解更多可以参考 官方文档 安装 利用 pip 安装 $ pip install requests 或者利用 easy_install ...

  2. Ubuntu安装Java8和Java9

    前言 系统:Ubuntu 16.04 软件: Java8, Java9 Tips: Java 9 的代码由于提供了新特性,所以有些代码并不支持向后兼容.也就是说,用 Java 9 写的代码,有可能在 ...

  3. 简说chart2.4的应用，以及Uncaught ReferenceError : require is not defined的解决

    51呢最近在学习chart.js,然后呢就照着中文的帮助文档来然后就一直出Uncaught ReferenceError : require is not defined的问题查了挺多才知道是帮助文档 ...

  4. JAVA 编码解码

    涉及编码的地方一般都在从字符到字节或是从字节到字符间的转换上 1.在IO中存在的编码,主要是 FileOutputStream 和 FileInputStream,在使用时需要指定字符集,而不是使用系 ...

  5. 笔记-测试崩溃之memcpy_s

    昨天晚上提测,今天早上测试发来贺电,程序崩溃!!!!!! 而问题出在memcpy_s errno_t memcpy_s( void *dest, size_t numberOfElements, co ...

  6. Windows环境下多线程编程原理与应用读书笔记（8）————信号量及其应用

    <一>线程间同步原因 线程间竞争共享资源: 线程间为完成某个任务而协作: 通过互斥量可以实现线程间由于竞争所需要的同步,通过事件可以实现线程间由于协作所需要的同步. 信号量很好地将互斥量和 ...

  7. Cable master

    Problem Description Inhabitants of the Wonderland have decided to hold a regional programming contes ...

  8. Pie

    Problem Description My birthday is coming up and traditionally I'm serving pie. Not just one pie, no ...

  9. poj 2486 Apple Tree(树形DP 状态方程有点难想)

    Apple Tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9808   Accepted: 3260 Descri ...

  10. NumPy基础练习（练一遍搞定NumPy）

    import numpy as np import pandas as pd from numpy import random from numpy.random import randn ##### ...