Webpack и TypeScript CommonsChunkPlugin не работает

Я следовал нескольким руководствам по настройке CommonsChunkPlugin, но, похоже, он не работает. Я также искал и читал другие сообщения здесь, но безуспешно.

У меня есть три файла (TypeScript), которые импортируют несколько одних и тех же библиотек (fancybox, moment и pikaday). Они импортируются с использованием синтаксиса модуля ES:

import * as fancybox from 'fancybox';
import * as moment from 'moment';
import * as pikaday from 'pikaday';

Мой tsconfig.json настроен на вывод синтаксиса и модулей ES6:

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "module": "es6",
        "noEmitOnError": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "diagnostics": false,
        "noFallthroughCasesInSwitch": true,
        "noImplicitReturns": true,
        "traceResolution": false
    },
    "exclude": [
        "node_modules",
        "venue-finder"
    ]
}

My webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const WebpackNotifierPlugin = require('webpack-notifier');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = [{
    bail: true,
    entry: {
        global: path.resolve(__dirname, 'js/responsive/global.ts'),
        todo: path.resolve(__dirname, 'js/todo/todo.ts'),
        budget: path.resolve(__dirname, 'Planner/javascript/Budget/BudgetPlannerUI.ts'),
        promotions: path.resolve(__dirname, 'js/promotions-management.ts'),
        planner: path.resolve(__dirname, 'Planner/javascript/MyPlanner.ts')
    },
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.ts(x?)$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        'presets': [
                            ['env', {
                                'modules': false
                            }]
                        ]
                    }
                },
                {
                    loader: 'ts-loader'
                }
            ]
        }]
    },
    plugins: [
        new WebpackNotifierPlugin({ alwaysNotify: true }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            filename: 'commons-bundle.js',
            minchunks: 2
        }),
        new BundleAnalyzerPlugin()
    ],
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    devtool: 'none'
}];

Насколько я понимаю, нужно найти любой фрагмент, который используется дважды или более (которых здесь три), и переместить его в commons-bundle.js, но когда я запускаю webpack и смотрю на выходные файлы, я вижу, что pikaday, moment и fancybox все они включаются в каждый из файлов, а не перемещаются в commons-bundle.js

Любая помощь приветствуется.


webpack typescript babeljs commonschunkplugin
person descendent    schedule 07.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы, вероятно, захотите использовать параметр minChunks как функцию вместо целочисленного значения. Вы fancybox, moment и pickaday исходите из node_modules, поэтому изменение minChunks, как показано ниже, должно работать:

new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            filename: 'commons-bundle.js',
            chunks: [global, todo, budget, promotions, planner], //optional, however I find this as good practice
            minChunks: function (module) {
               return module.context && module.context.indexOf("node_modules") !== -1;
            }
        }),
person VISHAL DAGA    schedule 08.04.2017
comment
Спасибо, это помогло мне. Однако это не перемещает какие-либо общие модули, которых нет в node_modules. Небольшая модификация вашей функции выше поддерживает оба случая: return (module.context && module.context.indexOf("node_modules") !== -1) || count >= 2; - person Paul; 14.02.2018