3-8 由浅入深 webpack - 代码分割和懒加载（2）

Question

var webpack = require('webpack')

var path = require('path')

module.exports = {

entry: {

'pageA': './src/pageA',

'pageB': './src/pageB',

'vendor': ['lodash']

},

output: {

path: path.resolve(__dirname, './dist'),

publicPath: './dist/',

filename: '[name].bundle.js',

chunkFilename: '[name].chunk.js'

},

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: ['vendor', 'manifest'],

minChunks: Infinity

}),

new webpack.optimize.CommonsChunkPlugin({

async: 'async-common',

children: true,

minChunks: 2

})

]

}

index.html引入后报错

pageA.bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined

    at pageA.bundle.js:1

Answer 1

慕斯卡8150754 2018-01-17 13:53:38

<script src="./dist/manifest.bundle.js"></script>

    <script src="./dist/vendor.bundle.js"></script>

    <script src="./dist/pageA.bundle.js"></script>

引入这三个文件才行，同步的代码，不会自己加载，需要自己引入

Answer 2

qbaty 2018-01-04 18:46:23

你的index.html 里引入了哪些js ？你如果分割了，不引用可不行啊

现在是因为demo 中的js 是手动引入的，所以如果分割出来了，必须手动把分割出来的代码加上

很麻烦，对吧？接着看，后面再介绍自动生成 html这一节中，使用 htmlwebpackplugin 就可以自动引入你分割出来的代码了 

• 慕斯卡8150754 #1

  我也遇到了这个问题，就是引入pageA.bundle.js

• qbaty 回复 慕斯卡8150754 #2

  接着看，后面在自动生成html 中有教如何自动引入