webpack-3-plugin插件-html打包压缩

Plugin

loader和plugin的区别：

• loader主要用于转换某些类型的模块，他是一个转换器
• plugin是插件，他是对webpack本身的扩展，是一个扩展器

plugin的使用过程：

1. 通过npm安装使用plugins，某些webpack已经内置插件
2. 在webpack.config.js中的plugins中配置插件

版权声明plugin

react MIT 协议

打包html 的插件

HtmlWebPackPlugin

cnpm install html-webpack-plugin@3.2.0 --save-dev

js压缩的plugin

cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev
和cli2保持一致

webpack-dev-server搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果
cnpm install webpack-dev-server@2.9.1 --save-dev

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性

• contentBase: 为哪个文件夹提供本地服务，默认是根文件夹，服务器启动的根目录
• port: 端口号
• inline：界面是否实时刷新
• historyApiFallback：在SPA界面，依赖html5的history模式

代码改变，dev-server只修改内存，不修改磁盘，暂时不映射，修改内容暂时缓存到内存中，反应更快！
npm run build 才映射到磁盘

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

devserver跑起来
npm run dev

配置分离

cnpm install webpack-merge@4.1.5 --save-dev

略…