Babel 和 Webpack es6 错误，尝试了许多修复，但无法正常工作答案

【问题标题】：Babel and Webpack es6 errors, tried numerous fixes found here but cant get it workingBabel 和 Webpack es6 错误，尝试了许多修复，但无法正常工作
【发布时间】：2018-12-31 01:45:00
【问题描述】：

尝试对我的烧瓶网站使用 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"
  }
}

【问题讨论】：

试试这个：{ test: /\.css$/, include: /node_modules/, loaders: ['style-loader', 'css-loader'], }
在我的 babel.rc 文件或 webpack.config.js 文件中试试？
在 webpack.config.js 中试试
谢谢！我把它扔到了我的 webpack.config.js 文件中，它似乎正在工作！你能解释一下这个解决方案，以便我了解未来的情况吗？

标签： javascript reactjs webpack babeljs babel-loader

【解决方案1】：

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

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

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

style-loader 采用这些样式并在包含这些样式的页面元素中创建一个标签。

希望对你有帮助:)

【讨论】：