webpack学习之六,代码分离

承接上面的webpack学习之五的代码
写在前面

1.代码分离可以将代码总公共的代码抽离出来,单独打包成一个文件,vue-cli中也是将所有的公共js打包成一个vendor文件
2.动态引入,可以实现代码分模块下载,有效提高速度,vue官方也给了方案

一.简单的代码分离(CommonsChunkPlugin )

1.webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins:[
        new UglifyJSWebpackPlugin({
            sourceMap:true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV':JSON.stringify('production')
        }),
        // 公共模块的代码抽离
        new webpack.optimize.CommonsChunkPlugin({
            // 将公共代码打包成以common命名的js文件
            name:'common'
        })
    ]
});

2.运行 npm run buid

二.动态导入

写在前面

需要在代码中使用es6的import()

1.webpack.common.js

const path = require('path');
const webpack  = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        // other:'./src/other.js'
    },
    plugins: [
        new CleanWebpackPlugin(['./dist']),
        new HtmlWebpackPlugin({
            title: 'Test Production'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: '[name].bundle.js',


// 抽离动态引入的代码,在webpack.prod.js中设置;需要使用import()语法
-----------------------------------------------

        chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}

2.webpack.prod.js

去掉webpack的commonsChunkPlugin代码

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins:[
        new UglifyJSWebpackPlugin({
            sourceMap:true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV':JSON.stringify('production')
        }),
        // 公共模块的代码抽离
        /*new webpack.optimize.CommonsChunkPlugin({
            name:'common'
        })*/
    ]
});

3.js使用(重点)

// 动态导入
function getComponent() {
    // /* webpackChunkName: "lodash" */ 'lodash' 此处标记代表让公共代码文件名字为lodash.xx.js
    return import (/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
        var element = document.createElement('div');
        element.innerHTML = _.join(['你好', '申玉超'], '');
        return element;
    }).catch(error => 'An error occurred while loading the component');
}

getComponent().then(component => {
    document.body.appendChild(component);
});

4.运行npm run build

三.小结

• 使用import()语法还是有些复杂,不过vue官方推荐的很好,可以尝试
• 能够打包出分离的公共代码已经非常不错了