無法在 webpack 3 中設置捆綁文件的自定義文件命名

Question

我希望在運行 webpack 進行生產后，我的捆綁文件的名稱為index.js和styles.css （如源文件的名稱） 。 但是我得到了名稱為main.js和main.css 的文件。 當我在兩種情況下都設置filename屬性時，我的 webpack 配置似乎設置正確。 我不明白為什么這不起作用。 我的配置有什么問題？

"webpack": "^3.1.0"

 const path = require('path'); // Plugins const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // Webpack Plugins const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin'); // VARS const NODE_ENV = process.env.NODE_ENV; const DEVELOPMENT = NODE_ENV === 'development'; const PRODUCTION = NODE_ENV === 'production'; module.exports = { context: path.resolve(__dirname, "src"), entry: "./index.js", output: { path: path.resolve(__dirname, "public"), filename: "assets/js/[name].js" }, module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'], }) } ] }, plugins: [ new NamedModulesPlugin(), new LoaderOptionsPlugin({ debug: !PRODUCTION, cache: !PRODUCTION, minimize: PRODUCTION, options: { sassLoader: { outputStyle: PRODUCTION ? 'compressed' : 'expanded', precision: 10, sourceComments: false, sourceMap: PRODUCTION, } } }), new ExtractTextPlugin({ filename: 'assets/css/[name].css', disable: !PRODUCTION, }), new HtmlWebpackPlugin({ filename: 'index.html', hash: false, inject: 'body', chunksSortMode: 'dependency', template: './index.html', }) ], devtool: DEVELOPMENT ? "cheap-module-eval-source-map" : "hidden-source-map", devServer: { contentBase: path.resolve(__dirname, "public"), historyApiFallback: true, host: '127.0.0.1', port: '3000' } };

Answer 1

當你想使用正則表達式[name] ，你應該提供一個對象作為條目，因為 webpack 將使用這個對象的每個鍵作為輸出的文件名。
如果您只將一個條目指定為字符串或數組，我想main是當沒有指定時包的默認名稱。

因此，要實現您想要的，您應該執行以下操作：

module.exports = {
    entry: {
        "index": "./index.js",
        "styles.css": "./path/to/styles.scss" //The .css in the key to avoid .js file
    }
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "assets/js/[name].js"
    },
    plugins: [
        //...
        new ExtractTextPlugin({
           filename: 'assets/css/[name]'
        }),
    ]
    //Rest of your config...
}

當心：

• 當您使用樣式作為入口時，請從 index.js 中刪除 style.scss 文件的導入/要求。 如果沒有，它將生成一個額外的無用的 index.css 文件。

• 不幸的是，使用此配置，如果您使用 HtmlWebpackPlugin 的自動注入，您將在 index.html 中的 .css 文件中獲得一個額外的帶有 src 的腳本。 所以這個解決方案不適用於自動注入。