Webpack 2 - Подавить файлы фрагментов

Поскольку мы помещаем этот вывод в балансировщик нагрузки (не используя прилипание), нам нужно разместить вывод этих файлов без кусков (ни хэшей).

Это два основных файла для конфигурации веб-пакета.

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const helpers = require('./helpers');

const STATIC_TRANSLATION_MAP = require('../TranslationMap.json');

module.exports = {
    entry: {
        app: ['./src/public/main.ts'],
        vendor: './src/public/vendor.ts',
        polyfills: './src/public/polyfills.ts'
    },
    output: {
        path: helpers.root('dist/public')
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader?-minimize'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[ext]'
            },
                        {
                test: /\.styl$/,
                include: helpers.root('src', 'public', 'app'),
                use: [
                    'raw-loader',
                    'stylus-loader'
                ]
            },
            {
                test: /\.styl$/,
                include: helpers.root('src', 'public'),
                exclude: helpers.root('src', 'public', 'app'),
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'stylus-loader'
                    ]
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'public', 'assets', 'css'),
                loader: 'raw-loader'
            },
            {
                test: /\.xlf$/,
                loader: 'raw-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
        alias: {}
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/public/index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'LOCALE_LIST': JSON.stringify(Object.keys(STATIC_TRANSLATION_MAP))
            }
        })
    ]
};

webpack.prod.js

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');

const prodEnv = 'production';

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                keep_fnames: true
            }
        }),
        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false
            }
        }),
        new ExtractTextPlugin('[name].css'),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(prodEnv)
            }
        })
    ]
});

Но, к моему удивлению, я заметил, что webpack создает дополнительные файлы. Вы видите те, что с цифрами? (от 0 до 19). Я не уверен, откуда они берутся, и каждое их содержимое начинается с webpackJsonp.

Есть ли способ отключить эту функцию фрагмента и просто создать три файла из entry?

введите здесь описание изображения


person oscar.fimbres    schedule 25.07.2017    source источник
comment
Попробуйте отключить/удалить этот new webpack.optimize.CommonsChunkPlugin и проверьте, получаете ли вы все еще файлы 0-9   -  person btzr    schedule 25.07.2017
comment
какая у вас версия вебпака?   -  person btzr    schedule 25.07.2017
comment
Это вебпак 2.0   -  person oscar.fimbres    schedule 26.07.2017
comment
это действительно странно, вы должны открыть проблему: webpack/issues   -  person btzr    schedule 26.07.2017


Ответы (1)


Что происходит?

Но, к моему удивлению, я заметил, что webpack создает дополнительные файлы. Вы видите те, что с цифрами? (от 0 до 19)

output.chunkFilename

Эта опция определяет имя non-entry файлов фрагментов. По умолчанию используется [id].js или значение, полученное из output.filename (имя заменено на id):

Блоки без входа (внешние)

./dist/[0].js
./dist/[1].js
./dist/[2].js
./dist/[3].js
...

Входные фрагменты из webpack.config.entry

./dist/app.js
./dist/vendor.js
...

Как это исправить?

В настоящее время CommonChunkPlugin получает только модули, импортированные из входных блоков.

webpack/issues/4392

Обходные пути / хаки

Эту концепцию можно использовать для получения неявных фрагментов общего поставщика:

new webpack.optimize.CommonsChunkPlugin({
  name: "vendor",
  minChunks: function (module) {
    // this assumes your vendor imports exist in the node_modules directory
    return module.context && module.context.indexOf("node_modules") !== -1;
  }
})

Передача свойства minChunks в функцию< /а>

webpack/issues/2855#issuecomment-239606760

https://stackoverflow.com/a/39401288/6836839

person btzr    schedule 26.07.2017