webpack-dev-server 注入 CSS webpack 没有答案

【问题标题】：webpack-dev-server injects CSS webpack doesn'twebpack-dev-server 注入 CSS webpack 没有
【发布时间】：2019-11-22 07:32:32
【问题描述】：

我是 webpack 的新手，在尝试构建一个简单的网页时遇到了问题。虽然我在使用 webpack-dev-server 时没有问题，但当我使用 webpack 构建应用程序时，我在 index.html 文件中看不到 CSS。

这里是webpack.conf.js：

var path = require( "path" );

const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {

    entry: {
        index: path.join( __dirname, "src", "index.js" )
    },

    output: {
        path: path.join( __dirname, "dist" ),
        filename: "bundle.js"
    },

    devServer: {
        host: '0.0.0.0',
        port: 9000,
        writeToDisk: true
    },

    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                exclude: /(node_modules)/,
                use: ['file-loader'],
            },
            {
                test: /\.svg$/,
                exclude: /(node_modules)/,
                loader: 'svg-inline-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["@babel/preset-env"] }
                }
            },
            {
                test: /\.styl$/,
                exclude: /(node_modules)/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader",   // translates CSS into CommonJS
                    "stylus-loader" // compiles Stylus to CSS
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            filename: 'index.html',
            template: path.join( __dirname, "src", "index.html" ),
            inject: true
        } ),
    ]
};

这是index.js：

import "./css/index.styl";
import "./css/graphics.styl";
import "./js/polyfills.js"
import "./js/manager.js"

console.log( "TEEEEEEEEEEEEEEEEST" );

这里是index.html：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</head>

<body>
    <div id="graphicsContainer" class="graphics-container">
        <%=require('./assets/images/barca_onde.svg')%>
    </div>
</body>

</html>

我用这个命令运行开发模式：

./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config /app/webpack.config.js --mode development --color --watch

虽然我使用的构建命令是这样的：

./node_modules/webpack/bin/webpack.js --config /app/webpack.config.js --mode production --color

这两个命令都没有显示任何错误，但第一个生成bundle.js、内联SVG、CSS代码并将它们注入index.html，而第二个只生成bundle.js和SVG并注入它们在index.html 中忽略 CSS。

我错过了什么？提前谢谢！

【问题讨论】：

标签： javascript html css node.js webpack

【解决方案1】：

发生这种情况是因为您的配置未设置为将编译后的 CSS 写入文件。样式注入只发生在开发模式下，这就是为什么在生产模式下构建时看不到它的原因。

如果您使用的是 webpack 的最新主要版本（截至本答案为 4），您将需要使用 MiniCssExtractPlugin。它会替换您配置中的style-loader。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV === 'development';

// ...

{
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],
  rules: [
    {
        test: /\.styl$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: devMode },
          },
          "css-loader",
          "stylus-loader"
        ]
    }
  ]
}

有关 webpack 之前的主要版本，请参阅 ExtractTextWebpackPlugin。

【讨论】：

感谢您的回复！那么我应该通过手动编写标签来导入 index.html 中的 CSS 还是自动添加？
我自己想通了！我将研究文档以了解如何将 CSS 直接注入 index.html