Javascript 正在将webpack.dev.config从webpack 1更新为4

对于开源站点，我正在尝试将站点更新为最新的组件（例如：Webpack4、react 16等）。我从巴贝尔开始，它顺利升级。然后移动到webpack。我花了10多个小时尝试各种配置，直到我最终使用以下方法将其编译：

/**
 * module dependencies for webpack dev configuration
 * Proper webpack dev setup:
 * https://medium.freecodecamp.org/how-to-develop-react-js-apps-fast-using-webpack-4-3d772db957e4

 */
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

// define paths
const nodeModulesPath = path.resolve(__dirname, '../node_modules');
const buildPath = path.resolve(__dirname, '../public', 'build');
const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js');
const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles');
const componentsPath = path.resolve(__dirname, '../frontend', 'Components');
const containersPath = path.resolve(__dirname, '../frontend', 'Containers');
const viewsPath = path.resolve(__dirname, '../frontend', 'Views');

/**
 * webpack development configuration
 */
module.exports = {
  mode: 'development',
  target: 'web',
  devtool: 'inline-source-map',

  entry: [
    'webpack-hot-middleware/client',
    mainAppPath,
  ],

  output: {
    filename: 'bundle.js',
    path: buildPath,
    publicPath: '/build/',
  },

  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [ 'babel-loader' ],
        exclude: [nodeModulesPath],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          // 'postcss-loader',
          { loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins() {
                return  [autoprefixer('last 5 version')];
              },
              // plugins: () => [require('autoprefixer')({
              //   'browsers': ['> 1%', 'last 5 versions'],
              // })],
            },
          },
          'sass-loader',
        ],
      },
      { test: /\.(png|jpg)$/, use: ['url-loader?limit=8192'] },
      { test: /\.svg$/, use: ['url-loader?limit=10000&mimetype=image/svg+xml'] },
    ],
  },

  resolve : {
    // automatically resolve file extensions (ie import File from '../path/file')
    extensions: ['.js', '.css'],
    // alias to call specified folders
    alias: {
      SharedStyles: sharedStylesPath,
      Components: componentsPath,
      Containers: containersPath,
      Views: viewsPath,
    },
  },
};

但是，React元素类名将消失，从而阻止应用样式。应该是这样的：

而是：

此外，头部现在有多个

s

请帮助我让类名重新出现并修复多个头样式元素。

---

仅供参考，我能够让PostSS loader运行的唯一方法是将其转换为对象。它将失败，并出现类似“错误：在…中找不到POSTSS配置”的错误

---

更新1：

尝试了@noppa和@Alex Ilyaev的以下建议，但没有成功

     {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          // 'css-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              loaders: true,
              importLoaders: 1,
              localIndentName:'[name]__[local]___[hash:base64:5]',
            },

          },
          // 'postcss-loader',
          { loader: 'postcss-loader',
            options: {
              sourceMap: 'inline',
              options: {
                ident: 'postcss',
                plugins: (loader) => [
                   require('autoprefixer')(),
                ],
              },
            },
          },
        ],
      },

---

如果您使用的是Webpack4，那么从没有配置文件开始-没错-没有配置文件。WP4包含健全的默认设置，因此大多数与网页无关的问题都会在这里出现

关于多样式块，您需要切换到（不支持HMR）或（支持HMR）

---

另外，请注意，在开发模式期间，您将看到多个样式块（用于HMR）。但是生产构建不应该有多个样式块

还可以添加旧的webpack配置。有人可能会注意到新版本中缺少或更改了某些内容。可能还有一个源文件，用来显示类名应该如何链接到元素。@noppa原始配置文件在Refrom github中共享。链接是。快速查看一下，您有

css加载器

的选项，这些选项现在被省略了。尝试

{loader:'css loader'，选项：{loaders:true，importLoaders:1，localIndentName:…}

尝试

插件：[autoprefixer（'last 5 version'）]

在

postss loader>options

下。我不确定这里是否支持函数变量。还有@noppa的注释。@noppa尝试了你的建议，但无效。用我的更改更新了问题。