从零搭建webpack+react+router+redux项目踩坑之旅

使用 webpack 从零搭建 react项目的git地址：https://github.com/YueJingGe/webpack-react/tree/master

webpack+react+router+redux项目配置中遇到的问题

解决 eslintrc import 报错

问题：Parsing error: The keyword 'import' is reserved

方案：.eslintrc 文件中配置 "parser": "babel-eslint"

解决 eslintrc html 报错

解决方案：

第一步： npm install --save-dev eslint-plugin-html

第二步： .eslintrc 文件中配置 "plugins": ["html"]

jsx语法报错

index.js 文件

import React from "react";
import ReactDom from "react-dom";

ReactDom.render(<div>hello,react</div>, document.getElementById("root"));

报错信息：

[WDS] Errors while compiling. Reload prevented.

Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDom.render(
>   <div>hello,react</div>,
|   document.getElementById("root")
| );

原因：无法支持 jsx 语法，您可能需要适当的加载程序来处理此文件类型。

解决：

第一步：安装加载程序

npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react

第二步：在 webpack 中配置

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react", "@babel/preset-env"]
        }
      }
    }
  ];
}

Uncaught Invariant Violation: Target container is not a DOM element.

解决：在 webpack 中配置

plugins: [
  new HtmlWebpackPlugin({
    title: "从零搭建webpack-react",
    template: "src/assets/index.html" // webpack需要模板的路径
  })
];

browserHistory 刷新页面 404

报错：Cannot GET /todo

解决：webpack 中配置historyApiFallback: true

devServer: {
  historyApiFallback: true;
}

import 编译 less 失败报错

报错信息：

ERROR in ./src/components/Todo/index.less 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .todo-container{
|   width: 100%;
| }
 @ ./src/components/Todo/index.js 20:0-22
 @ ./src/App.js
 @ ./src/index.js

解决：

module: {
  rules: [
    {
      test: /\.(css|less)$/,
      use: ["style-loader", "css-loader", "less-loader"]
    }
  ];
}

报错‘less’找不到

报错信息：

Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'

原因： less-loader 对 less 有依赖

解决：安装 less

报错 syntax ‘classProperties’ isn’t currently enabled

解决：安装插件：

npm install --save-dev @babel/plugin-proposal-class-properties

此插件转换静态类属性以及使用属性初始化程序语法声明的属性。

.babelrc 文件中配置：

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

使用es6类属性时，eslint报Parsing error: Unexpected token =

报错场景：

onPressEnter = e => {
  console.log(e.target.value);
};

解决：

第一步： npm install eslint babel-eslint --save-dev
第二步：.eslintrc文件中配置 "parser": "babel-eslint"