webpack2

webpack的特点：

一、有丰富的插件：HotModuleReplacementPlugin（模块热更新插件）、html-webpack-plugin（生成html插件）、clean-webpack-plugin（清理文件）、ProvidePlugin（自动加载模块）、DefinePlugin（定义全局变量）、compression-webpack-plugin（压缩js）、mini-css-extract-plugin（抽取css为独立的文件）

二、通过loader（可支持多种加载规范：es6、commonjs、AMD等）：babel-loader(es6语法)、css-loader、style-loader（内联）less-loader、file-loader(图片等文件)、url-loader(转为base64)

三、支持热加载（局部更新）、代码分割、长缓存

代码拆分实现方式（Code Splitting）：

1、手动把代码分成多个入口

2、使用插件（commonChunkPlugin）提取公共代码块

3、使用import函数动态引入模块（懒加载）

长缓存优化：

独立打包 vendor（第三方依赖：jquery、vue等）


将hash –> chunkhash（使得文件只随着内容变化，不随着编译变化，[hash]是每次编译都变化一次）


定义动态模块的chunkName

var path = require('path')
var webpack = require('webpack')
module.exports = {
  entry:{
    main:'./src/foo',
    vendor:['vue'] //第三方JS代码
  },
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'[name].[chunkhash].js'
    // chunkHash: 打包好的包的hash值
  },
  plugins:[
    // 将打包的包用namequ区分而不用id
    new webpack.NamedChunksPlugin(),
    new webpack.NamedModulesPlugin(),
    // 提取公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      minChunks:Infinity
    }),
    // 提取 webpack runtime
    new webpack.optimize.CommonsChunkPlugin({
      name:'manifest'
    })
  ]
}

webpack如何避免发布新的版本有浏览器缓存？

使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存

module.exports = {
  // ...
  output: {
    filename: '[name]-[hash].js'
 }, }

但是有时，把打包好的index.html放到服务器里去的时候，index.html在服务器端可能是有缓存的，这需要在服务器配置不让缓存index.html

nginx 配置，让index.html不缓存

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}

no-cache, no-store可以只设置一个
no-cache浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200
no-store浏览器不缓存，刷新页面需要重新下载页面

提升性能：

1、分离公共模块，实现长缓存。

2、代码压缩，减小体积。

3、cdn加速

4、路由和组件按需加载