0

我在webpack中配置了这个。

一开始postcss可以生效，但是如果在scss中引入图片会报这样的错误，所以我在postcss中添加了publicPath ，发现没有报错，但是又出现了新的问题。此时postcss不生效。你能帮我看看这个问题吗？

我的存储库：https ://github.com/pdsuwwz/react-app

scss 错误信息中的图像：

scss错误

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/black-coffee.png' in '/Users/admin/Documents/zhike/github/myRepository/react-app/src/script/components/redux-test'
    at factory.create (/Users/admin/Documents/zhike/github/myRepository/react-app/node_modules/webpack/lib/Compilation.js:814:10)

postcss 不工作警告信息：

[0] dll vendor 12 bytes {vendor} [built]
    + 82 hidden modules
 27% building modules 142/145 modules 3 active ..._modules/core-js/modules/_string-pad.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
 49% building modules 333/336 modules 3 active ...ntime/helpers/interopRequireWildcard.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

postcss 不工作警告

webpack.config.js

开始：

module.exports = {
  mode: process.env.NODE_ENV,
  entry: {
    bundle: ['@babel/polyfill', './src/script/app.js'],
  },
  output: {
    path: resolve('public'),
    filename: "bundle.js",
  },
  performance: {
    hints: false
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(jsx?)$/,
        loader: 'eslint-loader',
        include: resolve('src'),
        options: {
          fix: true,
          cache: resolve('.cache/eslint'),
          failOnError: true,
          useEslintrc: true,
          configFile: resolve('.eslintrc.js'),
          formatter: require('eslint-friendly-formatter'),
          // baseConfig: {
          //   extends: [resolve('.eslintrc.js')]
          // }
        }
      },
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }, {
        test: /\.scss/,
        use: [MiniCssExtractPlugin.loader, "css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]", {
          loader: 'postcss-loader',
          options: { ident: 'postcss', sourceMap: true, config: { path: resolve('postcss.config.js') }},
        }, "sass-loader"],
        exclude: resolve('node_modules'),
        include: resolve('src')
      }, {
        test: /\.css/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpe?g|bmp|gif|webp|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: 'assets/img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: 'assets/media/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 8192,
          name: 'assets/fonts/[name].[hash:7].[ext]'
        }
      }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),
    new webpack.DllReferencePlugin({
      context: path.join(__dirname, '..'),
      manifest
    }),
    new FriendlyErrorsWebpackPlugin({
      clearConsole: false,
      onErrors: (severity, errors) => {
        if (severity !== 'error') {
          return;
        }
        const error = errors[0];
        notifier.notify({
          title: 'Webpack error',
          message: `${severity}: ${error.name}`,
          subtitle: error.file || '',
        });
      },
    }),
  ],
}

结尾：

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }, {
        test: /\.scss/,
        use: [MiniCssExtractPlugin.loader, "css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]", {
          loader: 'postcss-loader',
          options: { ident: 'postcss', sourceMap: true, config: { path: resolve('postcss.config.js') }, publicPath: '../' },
        }, "sass-loader"],
        exclude: resolve('node_modules'),
        include: resolve('src')
      },
      ...
    ]
  }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "6"
        }
      }
    ],
    [
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    "lodash",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties",{ "loose": true }],
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-transform-modules-commonjs",
    [
      "babel-plugin-react-css-modules",
      {
        "generateScopedName": "[name]_[local]_[hash:base64:5]",
        "webpackHotModuleReloading": true,
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ],
    ["module-resolver", {
      "alias": {
        "@commMdule": "./src/styles",
        "@images": "./src/images"
      }
    }]
  ]
}

postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer")({ browsers: ['last 2 versions'] }),
    require("cssnano")()
  ]
}
4

0 回答 0