Question

对于开源网站ReForum，我尝试将网站更新为最新组件（即：webpack 4，反应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,
    },
  },
};

Original Webpack 1 dev config

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

而是：

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

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

仅供参考，我能够让postcss-loader运行的唯一方法是将其变成一个对象。它会失败，例如＆＃34;错误：在...＆＃34;

中找不到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相关的问题都会出现在那里。

关于多个样式块，您需要切换到mini-css-extract-plugin（不支持HMR）或extract-css-chunks-webpack-plugin（支持HMR）。

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

将Webpack.dev.config从Webpack 1更新到4

1 个答案: