webpack+react

用的webpack4.x 按照官网的前期配置，搭建一个雏形，由于技术栈是react，然后还想ES6等语法，这就不可避免遇到Babel的安装问题，但是Babel官方升级之后的配置会有不兼容问题，先介绍一下Babel：

Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods)
更多！ (查看这些 视频 获得启发)
以上来自中文官网介绍

为了快速开发，首先记录一下package.json

{
  "name": "appfirst",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-preset-env": "^7.0.0-beta.3",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^0.28.11",
    "eslint": "^6.0.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-html": "^6.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.8.3",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "sass-loader": "^7.0.1",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.79.1",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-latest": "^6.24.1",
    "lodash": "^4.17.11",
    "bootstrap": "^3.3.7",
    "normalize.css": "^8.0.0",
    "react-bootstrap": "^0.32.1"
  },
  "main": ".eslintrc.js",
  "description": ""
}

以上包含了Eslint、CSS、File解析器

再记录一下webpack.config.js文件信息

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // entry: './src/index.js',
  entry: {
    app: "./src/index.js",
  },
  output: {
    // filename: 'bundle.js',
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  // 展开编译之后的文件
  devtool: "inline-source-map",
  // 服务器自己刷新
  devServer: {
    contentBase: "./dist"
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html', //指定模板路径
      filename: 'index.html', //指定文件名
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          "file-loader"
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          "file-loader"
        ]
      },
      {
        test: /\.js$/,
        loader: "eslint-loader",
        enforce: "pre",
        include: [path.resolve(__dirname, "src")], // 指定检查的目录
        options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
          formatter: require("eslint-friendly-formatter") // 指定错误报告的格式规范
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', '@babel/preset-react']
          }
        }
      },
    ]
  }
};