Webpack bundle 生成额外的 JS 文件和 CSS 文件

问题描述

下面是我的 webpack 配置

Below is my webpack configuration

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        app: './src/index.js',
        style: './src/style.less',
        bootstrap: './node_modules/bootstrap/dist/css/bootstrap.min.css'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Test Application',
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: this.mode == "development" ? '[name].css' : '[name].[hash].css',
            chunkFilename: this.mode == "development" ? '[id].css' : '[id].[hash].css',
        })
],
output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
              ],
        },
        {
            test: /\.less$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        }
    ]
}

};

它生成style.js和style.css，我不明白它为什么生成style.js.

It generates style.js along with style.css, I don't understand why it generates the style.js.

也用于引导程序:'./node_modules/bootstrap/dist/css/bootstrap.min.css';它生成 bootstrap.js 而不是 bootstrap.css.再说一遍，我不明白这一点.

Also for bootstrap: './node_modules/bootstrap/dist/css/bootstrap.min.css'; it generates bootstrap.js instead of bootstrap.css. again, I don't understand this.

注意:我希望应用程序应该在开始时加载 css，因此，网页不应该一个接一个地等待/呈现不同的 css.所以我没有使用 import 语句，而是在 entry 中给出了 css 文件路径.

Note: I wanted an application should be loaded with css in the beginning itself, thus, the web page should not wait/render different css one after another. So I haven't used an import statement and gave css file path inside entry.

应用程序按预期工作，我是否遗漏了一些概念或代码中有任何修复?

推荐答案

看起来像是 webpack 中的一个已知问题.您可以简单地忽略生成的文件，而无需在页面上引用相同的文件.

Looks like a known issue in webpack. You can simply ignore the file generated and you don't need to refer the same on your page.

您可以在此处查看问题讨论

You can see the issue discussions here

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518

这篇关于Webpack bundle 生成额外的 JS 文件和 CSS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！