javascript - Babel 和 Webpack es6 错误，尝试了此处找到的许多修复，但无法使其正常工作

Question

尝试在我的 Flask 网站上使用 React 时，我不断收到错误。我已经尝试了在这里找到的大量修复程序，但每当我越过一个修复程序时，就会弹出另一个修复程序。

最近的错误是:

Module parse failed: Unexpected Token (3:0)
You may need an appropriate loader to handle this file type.
| /* DayPicker styles */
| 
> .DayPicker {
|   display: inline-block;
|   font-size: 1rem;
 @ ./js/daypicker.js 17:0-41
 @ ./js/index.js

我尝试添加 CSS 和样式加载器，如下所示，但我无法让它工作。我的代码可能很困惑，但这是因为我一直在尝试一堆不同的修复，其中一些已被其他修复覆盖。

这是我的 webpack.config.js 文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',

  entry: {
    index: './js/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'static/lib'),
    filename: '[name].js',
    publicPath: '/static/lib'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'style-loader',
          loader: 'css-loader',
          loader: 'babel-loader',
          query: {
            cacheDirectory: true,
            presets: ['es2015', 'react', 'stage-0', 'env'],
          }
        }
      },

    ]
  }
};

我什至尝试添加 babel.rc 文件(按照此处找到的一些修复中的建议):

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader?cacheDirectory=true'
}

但似乎没有什么作用

不确定这是否相关，但这是我的 package.json 文件:

{
  "name": "shopping-cart",
  "version": "1.0.0",
  "description": "run `npm install`. and then `npx webpack`",
  "scripts": {
    "build": "webpack -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pambalos/shopping-cart.git"
  },
  "author": "Bradley J <bradleyjusticeca@gmail.com>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/pambalos/shopping-cart/issues"
  },
  "homepage": "https://github.com/pambalos/shopping-cart#readme",
  "main": "index.js",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "date-fns": "next",
    "moment": "latest",
    "react": "latest",
    "react-day-picker": "^7.2.4",
    "react-dom": "latest",
    "react-helmet": "latest",
    "webpack": "^4.28.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "styled-components": "^3.4.6",
    "webpack-cli": "^3.1.2"
  }
}

Answer 1

为了解决这个问题，我们可以在 webpack.config.js 中使用 style-loader 和 css-loader，如下所示:

{ 
  test: /\.css$/, 
  include: /node_modules/, 
  loaders: ['style-loader', 'css-loader'] 
}

css-loader 将 css 文件作为字符串读取。由于它只是读取文件内容而没有其他任何内容，因此除非您将其与另一个加载器链接起来，否则它基本上是无用的。

style-loader 接受这些样式并在包含这些样式的页面元素中创建一个标记。

希望有帮助:)