webpack4.0懒加载

懒加载或者按需加载，可以优化网页或应用。
webpack 懒加载学习

例子链接：懒加载/demo15/
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// const webpack = require('webpack');
module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
+        chunkFilename: '[name].bundle.js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
    ]
}

filename：对应于entry里面生成出来的文件名

chunkFilename：chunkname就是未被列在entry中，异步加载模块时会用到这个。

新建 print.js

console.log('The print.js module has loaded! See the network tab in dev tools...');

export default () => {
    console.log('Button Clicked: Here\'s "some text"!');
}

新建test.js

console.log('按需加载，厉害了')
export  function test() {
    console.log('test')
}

修改 index.js，

import _ from 'lodash';
function buttonCreat(element,text) {
    var button = document.createElement('button');
    var br = document.createElement('br');

    button.innerHTML =text;

    element.appendChild(br);
    element.appendChild(button);
    return button
    // Note that because a network request is involved, some indication
    // of loading would need to be shown in a production-level site/app.

}
function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    let btn1 = buttonCreat(element,'Click me and look at the console!')
    let btn2 = buttonCreat(element,'test.js 测试')

    btn1.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
        var print = module.default;

        print();
    });
    btn2.onclick = e=>import(/* webpackChunkName: "test" */'./test').then(module=>{
        var test = module.test
        test()
    })

    return element;
}
document.body.appendChild(component());

这里关键代码

   btn2.onclick = e=>import(/* webpackChunkName: "test" */'./test').then(module=>{
        var test = module.test
        test()
    })

webpackChunkName的意思是定义一个打包后的名字，结合chunkFilename使用。webpack打包后为 print.bundle.js、 test.bundle.js
运行命令 npm run build,可以看到打包的文件

Built at: 08/14/2019 5:37:21 PM
          Asset       Size  Chunks             Chunk Names
  app.bundle.js   72.2 KiB       0  [emitted]  app
     index.html  192 bytes          [emitted]  
print.bundle.js  250 bytes       1  [emitted]  print
 test.bundle.js  207 bytes       2  [emitted]  test

此处也可以不用，

   btn2.onclick = e=>import('./test').then(module=>{
        var test = module.test
        test()
    })

那么打包后文件是1.bundle.js，2.bundle.js，这是 webpack 默认给的名字。
运行npm run build，可以看到不使用webpackChunkName后，生成 js 文件变为了1.bundle.js，2.bundle.js

Built at: 08/14/2019 5:35:29 PM
        Asset       Size  Chunks             Chunk Names
  1.bundle.js  250 bytes       1  [emitted]  
  2.bundle.js  207 bytes       2  [emitted]  
app.bundle.js   72.2 KiB       0  [emitted]  app
   index.html  192 bytes          [emitted]