webpack进阶

先来看看最基础的webpack配置：

var path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

在index.js中引入了lodash库：
src/index.js：

import _ from 'lodash';
 
  function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
    return element;
  }
 
  document.body.appendChild(component());

打包之后，只会生成一个bundle.js，这样的话，每次若要加载资源文件，浏览器都会加载根本不会改动的lodash库，这样很低效。
由于如果每次去访问浏览器，浏览器都重新下载资源，由于网络获取资源可能很慢，可能页面久久加载不出来，低效且不友好，故浏览器会缓存资源，以避免每次访问都通过网络去获取资源。
但是，由于浏览器缓存，又会出现新的问题，如果我们部署版本时不更改资源的文件名，浏览器可能认为它没有更新，就会使用它的缓存版本。
这样我们就需要解决两个问题：第一，分离打包文件。第二，解决缓存问题。

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: {
    common: ['lodash'],
    app: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common'  // 指代index.js引入的lodash库
    })
  ]
}

主要变动：

• 添加插件：CommonsChunkPlugin，提取引入的库，并且更名，实现代码分离。
• 输出上在名字上加了hash，每次打包后，hash值都不一样解决了浏览器缓存的问题。

结果：index.js打包为app.[hash].js，index.js引入的lodash打包为common.[hash].js。这样解决了浏览器缓存问题和实现了静态资源代码和源代码的分离，但是新的问题又出现了。