如何使用webpack拆分常用业务代码？

Question

我使用webpack.optimize.CommonsChunkPlugin生成一个额外的chunk(vueCommon.js)，其中包含vuejs、vue-router、vue-resource...；但是我想生成另一个业务commonChunk，比如util.js。"import ajax from '../service/service.js'";

仅在某些页面中使用它们

构建后的问题：每个生成的page.js都有service.js的代码。

简要演示： https://github.com/wxungang/vueJs

//webpack.base.js

"use strict";

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const CONFIG = require('./config');
var projectRoot = CONFIG.projectRoot || path.resolve(__dirname, '../');
var _ENV = CONFIG.env || 'dev';//prod

module.exports = {
    devtool: _ENV != 'prod' ? '#eval-source-map' : false,
    context: __dirname,//http://wxungang.github.io/1104/vue
    entry: {
        app: path.join(projectRoot, './vue/app.js'),
        page: path.join(projectRoot, './vue/page.js')
    },
    output: {
        path: path.join(projectRoot, './build/vue-' + _ENV),
        publicPath: '',//'./build/vue-'+_ENV+'/',//path.join(__dirname, '../src/build/dev/')
        filename: '[name].js',
        chunkFilename: 'chunks/[name].chunk.js',
        // crossOriginLoading: 'anonymous'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'vue-router$': 'vue-router/dist/vue-router.common.js'
        },
        modules: ["node_modules"],
        mainFiles: ["index", "app"],
        extensions: [".js", ".json", '.vue']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this nessessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
                        'less': 'vue-style-loader!css-loader!less-loader'
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.html$/,
                loader: 'vue-html-loader'
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        //注入一些全局变量
        new webpack.DefinePlugin({
            _ENV_: _ENV,
            _VERSION_: JSON.stringify("1.0.0")
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "commons",
            // (the commons chunk name)

            filename: "vueCommons.js",
            // (the filename of the commons chunk)

            // minChunks: 2,
            // (Modules must be shared between 3 entries)

            // chunks: ["pageA", "pageB"],
            // (Only use these entries)
            // children: true,
            // async: true,
        }),
        //可以和entry文件联合配置
        new HtmlWebpackPlugin({
            inject: false,
            title: 'vueJs of app',
            filename: 'app.html',
            template: '../vue/entry/template.ejs',
            scripts: ['./vueCommons.js', './app.js']
        }),
        new HtmlWebpackPlugin({
            inject: false,
            title: 'vueJs of page',
            filename: 'page.html',
            template: '../vue/entry/template.ejs',
            scripts: ['./vueCommons.js', './page.js']
        })
    ]

};

Answer 1

你是怎么用CommonsChunkPlugin生成vueCommon.js的？

一个简单的方法是添加一个新的wepack条目，例如

utils: ['../service/service.js']

然后像这样在 webpack 插件数组中添加一个新的 CommonsChunkPlugin 实例

new webpack.optimize.CommonsChunkPlugin('utils'),

CommonsChunkPlugin 将通过删除其他块文件中的所有 utils 模块并仅生成一个 utils.js.

来完成这项工作

或者您可以将现有的 CommonsChunkPlugin 的 minChunks 选项设置为一个数字，以将 vue 文件和 utils 包装在一起。

如何使用webpack拆分常用业务代码？

how to use webpack split common business code?

webpack-2

vue-router

vuejs2