使用块时的 Webpack 输出命名

Question

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// Is the current build a development build
const IS_DEV = (process.env.NODE_ENV === 'dev');
const THEMES = process.env.THEMES.split(',');

const dirNode = 'node_modules';
const dirApp = path.join(__dirname, 'src/app');
const dirAssets = path.join(__dirname, 'src/assets');
const dirSass = path.join(__dirname, 'src/sass');

const appHtmlTitle = 'Webpack Boilerplate';

let entry = {
    vendor: [
        'lodash'
    ]
}

let themeName = '';

let themes = THEMES.map((theme) => {
    console.log('theme: ', theme);
    themeName = theme;
    return path.join(dirApp, theme);
});

console.log(themes)

entry[themeName] = themes

/**
 * Webpack Configuration
 */
module.exports = {
    entry: entry,
    resolve: {
        modules: [dirNode, dirApp, dirAssets, dirSass],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            IS_DEV: IS_DEV
        }),

        new webpack.ProvidePlugin({
            // lodash
            _: "lodash"
        }),

        new HtmlWebpackPlugin({
            template: path.join(__dirname, "index.ejs"),
            title: appHtmlTitle
        }),

        new ExtractTextWebpackPlugin({
            filename: "[name].css",
            disable: false,
            allChunks: true
        })
    ],
    module: {
        rules: [
            // BABEL
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /(node_modules)/,
                options: {
                    compact: true
                }
            },

            // CSS / SASS
            {
                test: /\.scss/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: { sourceMap: true }
                        },
                        {
                            loader: "sass-loader",
                            options: { sourceMap: true }
                        }
                    ],
                    publicPath: "/dist"
                })
            },

            // EJS
            {
                test: /\.ejs$/,
                loader: "ejs-loader"
            },

            // IMAGES
            {
                test: /\.(jpe?g|png|gif)$/,
                loader: "file-loader",
                options: {
                    name: "[path][name].[ext]"
                }
            }
        ]
    }
};

webpack.config.build.js

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpackConfig = require('./webpack.config');

module.exports = Object.assign(webpackConfig, {

    devtool: 'source-map',

    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },

    plugins: webpackConfig.plugins.concat([
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor']
        }),

        new CleanWebpackPlugin(['dist'])
    ])

});

package.json 构建任务行

"build-wacoal": "cross-env NODE_ENV=dev THEMES='index,red' 
webpack -p --progress --config webpack.config.build.js"

"build-wacoal": "cross-env NODE_ENV=dev THEMES='index,blue' 
webpack -p --progress --config webpack.config.build.js"

运行上述之一将发出以下文件（为简洁起见，其他文件省略）：

• vendor.js
• red.js（或 blue.js）
• red.css（或 blue.css）

如果我希望 js 文件只被称为 bundle.js。如果我不需要 vendor.js 文件，我可以在输出中将其命名为 bundle，但我必须使用 [name].js 否则会影响名称任何块。

如何在不影响 vendor.js 的情况下将 red.js 或 blue.js 重命名为 bundle.js 和 css 文件？

Answer 1

好吧，我想通了，我添加了chunk-rename-webpack-plugin，它允许我列出我的主题并相应地重命名。

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ChunkRenameWebpackPlugin = require('chunk-rename-webpack-plugin');
const webpackConfig = require('./webpack.config');

module.exports = Object.assign(webpackConfig, {
  devtool: 'source-map',

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },

  plugins: webpackConfig.plugins.concat([
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
    }),

    new CleanWebpackPlugin(['dist']),

    new ChunkRenameWebpackPlugin({
      red: 'bundle.js',
      blue: 'bundle.js'
    })
  ])
});