WebPack 5 将 CSS 和 JS 合并为一个 JavaScript 文件

问题描述

我开始在一个项目上使用 WebPack 5，我按照说明制作了 webpack.config.js 文件。

但是，如果我运行它的构建，CSS 和 JavaScript 文件将合并为一个有几 MB 的 JavaScript 文件。

WebPack 是否可以将 CSS 和 JS 文件分开？

module.exports = {
    entry: {
        application: "./bundle/index.js"
    },mode: (process.env.NODE_ENV === "production") ? "production" : "development",module: {
        rules: [
            {
                test: /\.(css)$/i,use: [
                    "style-loader","css-loader"
                ],},{
                test: /\.s[ac]ss$/i,"css-loader","sass-loader"
                ]
            },{
                test: /\.(js)$/i,use: {
                    loader: "babel-loader"
                },exclude: /node_modules/,],plugins: [
        new WebpackManifestPlugin({
            fileName: "manifest.json"
        }),new MiniCssExtractPlugin({
            filename: "[name]-[contenthash].css"
        })
    ],resolve: {
        extensions: [".js",".jsx"],output: {
        filename: "[name]-[fullhash].js",chunkFilename: "[id]-[chunkhash].js",path: path.join(__dirname,"www","assets"),publicPath: ""
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）