Webpack（webpack-dev-server）

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

1、安装webpack

npm安装插件是从国外服务器下载，受网络影响大；安装淘宝 NPM 镜像，从官方 NPMregistry.npmjs.org 进行安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm/npm install --save-dev webpack

2、webpack基本使用

1）支持CommonJS、AMD、ES6模块

CommonJS：Node 应用由模块组成，采用 CommonJS 模块规范

a）module.exports：当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量

b）require：加载模块文件

2）webpack只能处理js，可以使用loader 将其它类型的资源文件（如css）转换成js。

（1）webpack处理css（安装loader：cnpm i --save-dev css-loader style-loader）

（2）webpack.config.js

在命令行执行webpack命令：在工程的根目录寻找webpack.config.js文件并读取其中的内容（也可以通过--config参数指定其它文件）

webpack.config.js配置项：http://webpack.github.io/docs/configuration.html

（3）package.json

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

scripts字段指定了运行脚本命令的npm命令行缩写

//package.json
{
  //...
  "scripts": {
    "dev": "webpack -p --watch"
  },
   //...
}

npm run dev => webpack -p --watch 

3）HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为您的 webpack bundle 提供服务

（1）安装：cnpm i --save-dev html-webpack-plugin

2、webpack打包命令

webpack --watch //监听变动并自动打包

webpack -p//压缩混淆脚本

3、webpack-dev-server（DevServer）

安装：npm install webpack-dev-server --save-dev

webpack-dev-server启用一个服务后，会监听你的文件，当内容改变时会自动重新打包，默认端口是8080。

webpack-dev-server是一个小型的Node.js Express服务器，webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中。

//webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }
}

webpack-dev-server 会默认以 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。

//package.json
{
  ...
  "scripts": {
    "test1": "webpack-dev-server", //修改代码后会自动打包页面重载
    "test2": "webpack-dev-server --inline=false", //iframe模式
    "test3": "webpack-dev-server --hot", //修改代码后会自动打包，浏览器只替换更新的部分
    "test4": "webpack-dev-server --open" //自动在默认浏览器中打开url
  }
}

webpack-dev-server支持两种模式来自动刷新页面。

iframe模式：修改代码后会自动打包，但是浏览器不会自动刷新。

inline模式：修改代码后，webpack将自动打包并且刷新浏览器。（默认）

2）webpack-dev-server --hot：启用热模块替换（只替换更新的部分,而不是页面重载）