Webpack 渲染 sass、babel 和 es2015 - 你可能需要一个合适的加载器来处理这个文件类型

Question

我想配置 webpack 来渲染 es15、react 和 sass。

添加 sass 加载代码后，我收到以下消息：

ERROR in ./src/app.jsx
Module parse failed: /home/giedrius/projects/react-redux/react-redux-seed/src/app.jsx Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|   render () {
|     return <Header/>;
|   }
| }
 @ multi (webpack)-dev-server/client?http://localhost:8085 ./src/app.jsx

我的 webpack 配置如下所示：

const path = require('path'); 
let webpack = require('webpack');
let ExtractTextPlugin = require("extract-text-webpack-plugin");

    module.exports = {
         entry: './src/app.jsx',
         output: {
             path: path.resolve(__dirname, 'public', 'js'),
             filename: 'app.bundle.js'
         },
         resolve: {
            extensions: ['.js', '.jsx']
         },
         module: {
             loaders: [
                {
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: { presets: ['es2015', 'react'] }
                }
              ],
                rules: [
                  {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: ['css-loader', 'sass-loader']
                    })
                  }
                ]
      },
      plugins: [
        new ExtractTextPlugin("public/css/styles.css"),
      ]

     };

服务器正在启动并显示标题，所以不确定为什么会出现此消息。有人遇到过类似的问题吗？

添加的代码是规则和插件数组。

任何帮助将不胜感激

提前致谢

Answer 1

你有加载器和规则，它们基本上是一样的。装载机重命名为规则。你应该只有其中之一。

查看更多信息：https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

试试这个：

module: {
  rules: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      options: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
}