webpack使用require.ensure進行代碼分割

代碼分割

實例來自於webpack
假定咱們有下面的項目結構

.
├── dist
├── js
│   ├── a.js
│   ├── b.js
│   ├── c.js
│   └── entry.js
└── webpack.config.js

文件內容
entry.js

require('./a');
require.ensure(['./b'], function(require){
    require('./c');
    console.log('done!');
});

a.js

console.log('***** I AM a *****');

b.js

console.log('***** I AM b *****');

c.js

console.log('***** I AM c *****');

下面咱們看一下webpack.config.js的配置

const path = require('path')


module.exports =  {
        entry : './js/entry.js'
        ,
        output : {
            filename : 'bundle.js'
            , path : path.resolve(__dirname, 'dist')
            , publicPath: './dist/' //當使用代碼分割時，publicPath很重要，它將告訴webpack從哪兒去加載其餘打包的文件
            , pathinfo : true
        }
    }

執行webpack打包以後，咱們能夠看到結果

咱們發現，webpack打包生成了bundle.js以及1.bundle.js兩個文件
查看文件的內容，咱們能夠發現

//bundle.js
/******/ (function(modules) { // webpackBootstrap
/******/     /*
                webpack 集成的代碼，這裏略
            */
/******/     __webpack_require__.p = "./dist/"; //按需加載的路徑

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!*********************!*\
  !*** ./js/entry.js ***!
  \*********************/
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(/*! ./a */ 1)

    __webpack_require__.e/* nsure */(1, function (require) {
        __webpack_require__(/*! ./c */ 3)
        console.log('done!')
    })

/***/ },
/* 1 */
/*!*****************!*\
  !*** ./js/a.js ***!
  \*****************/
/***/ function(module, exports) {

    console.log('I am a')

/***/ }
/******/ ]);

//1.bundle.js
webpackJsonp([1],[
/* 0 */,
/* 1 */,
/* 2 */
/*!*****************!*\
  !*** ./js/b.js ***!
  \*****************/
/***/ function(module, exports) {
    
    console.log('I am b')
/***/ },
/* 3 */
/*!*****************!*\
  !*** ./js/c.js ***!
  \*****************/
/***/ function(module, exports) {
    console.log('I am c')
/***/ }
]);

a.js的內容被打包到bundle.js之中,而b.js,c.js則位於1.bundle.js中,b.js,c.js從主入口文件中分離了出來，並且只有c.js的內容被執行了