Question

我正在使用webpack创建一个包含缩小的JS和受限CSS的生成构建。但是当我尝试运行我的构建时，没有任何外部css表加载，尽管构建过程成功。

在我生成的构建文件夹中，所有资源（如css，images）都放在root上。

这是我的webpack.production.congig文件：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry:  __dirname + "/app/index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            },
          },
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/index.tmpl.html"
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]

}

以下是我的索引模板的样子：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="./app/resources/images/favicon.ico" />
    <link type="text/css" src="style.css"/>

  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

My Build文件夹的内容如下：

Answer 1

所以问题在于我的webpack配置，在使用 css-loader 时我应该启用模块 true

这是我配置的更新部分。

{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            },
            {
             loader: "postcss-loader",
              options: {
                config: {
                  path: './postcss.config.js'
                }
              }
            }

          ]
        })
      }

Webpack：在生产版本中加载外部css文件的问题

1 个答案: