javascript - 将 webpack.dev.config 从 Webpack 1 更新到 4

Question

对于开源站点，ReForum ，我正在尝试将站点更新为最新组件(即:webpack 4、react 16 等)。我从babel入手，顺利升级。然后转移到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,
    },
  },
};

Original Webpack 1 dev config

但是，React 元素类名消失了，阻止了样式的应用。它应该是这样的:

而是:

此外，头部现在有多个 <style> .

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

---

仅供引用，我能够让 postcss-loader 运行的唯一方法是将它变成一个对象。它会失败并出现诸如“错误:在...中找不到 PostCSS 配置”之类的错误

---

更新 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')(),
                ],
              },
            },
          },
        ],
      },

Answer 1

如果您使用的是 Webpack 4，请从无配置文件开始 - 没错 - 无配置文件。 WP4 包括合理的默认设置，因此您的大多数与 webpack 无关的问题都会在那里出现。

关于多样式 block ，需要切换到mini-css-extract-plugin (不支持 HMR)或 extract-css-chunks-webpack-plugin (支持 HMR)。

另外请注意，在开发模式下，您会看到多个样式 block (用于 HMR)。但是生产构建不应该有多个样式 block 。