Question

我是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排除在外。

我想念什么？预先谢谢你！

Answer 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。

webpack-dev-server注入CSS webpack不

1 个答案: