webpack 持久化缓存

console.log($.trim(’ do something '));

// src/pageB.js

// 页面 A 和 B 都用到了公共模块 componentA，需要抽离，避免重复加载

import componentA from ‘./common/componentA’;

import componentB from ‘./common/componentB’;

import ‘./css/common.css’

import ‘./css/pageB.css’;

console.log(componentA);

console.log(componentB);

// 用到异步加载模块 asyncComponent，需要抽离，加载首屏速度

document.getElementById(‘xxxxx’).addEventListener(‘click’, () => {

import( /* webpackChunkName: “async” */

‘./common/asyncComponent.js’).then((async) => {

async();

})

})

// 公共模块基本长这样

export default “component X”;

上面的页面内容基本简单涉及到了我们拆分模块的三种模式：拆分公共库，按需加载和拆分公共模块。那么接下来要配置 webpack ：

const path = require(‘path’);

const webpack = require(‘webpack’);

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {

entry: {

pageA: [path.resolve(__dirname, ‘./src/pageA.js’)],

pageB: path.resolve(__dirname, ‘./src/pageB.js’),

},

output: {

path: path.resolve(__dirname, ‘./dist’),

filename: ‘js/[name].[chunkhash:8].js’,

chunkFilename: ‘js/[name].[chunkhash:8].js’

},

module: {

rules: [

{

// 用正则去匹配要用该 loader 转换的 CSS 文件

test: /.css$/,

use: ExtractTextPlugin.extract({

fallback: “style-loader”,

use: [“css-loader”]

})

}

]

},

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: ‘common’,

minChunks: 2,

}),

new webpack.optimize.CommonsChunkPlugin({

name: ‘vendor’,

minChunks: ({ resource }) => (

reso