Question

我希望我的捆绑文件的名称为 index.js 和 styles.css （如源文件的名称）运行webpack进行生产。但我得到名称为 main.js 和 main.css 的文件。当我在两种情况下都设置 filename prop时，我的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 中删除styles.scss文件的import / require。如果不是，它将生成一个额外且无用的index.css文件。
不幸的是，使用这种配置，如果您使用自动注入HtmlWebpackPlugin，您将获得一个带有src的额外脚本到index.html中的.css文件。因此，此解决方案不适用于自动注入。

无法在webpack 3

1 个答案: