摘要：建立项目首先，创建工程目录现在我们已经创建了我们要开发应用程序的文件夹，接着需要添加一个文件。这里为了版本的一致性，我把里的版本号前面删除了。为此，需要创建一个名为的文件，用来配置。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

在过去的一年和一些人中，我一直在与 Creative Tim 合作。 我一直在使用 create-react-app 来开发一些不错的产品。 有很多客户询问如何在 Webpack 上迁移我们的产品模板。

在多次要求求之后，我们写了这个关于如何开始使用 React with Webpack 4和 Babel 7 的小教程。在本教程的最后，将向大家展示如何在新创建的应用程序上添加 Material Dashboard React。

在我们开始之前，请确保你的电脑上安装了 npm 和 Nodejs 的最新版本。在撰写本文时，我的电脑上的最新版本是 npm 的 6.4.1 和 Nodejs 的 8.12.0 (lts)。

建立项目

首先，创建工程目录：

mkdir react-webpack-babel-tutorial
cd react-webpack-babel-tutorial

现在我们已经创建了我们要开发应用程序的文件夹，接着需要添加一个 package.json 文件。 有两种创建方式，你可以选择其中的一种：

1.只需创建 package.json 文件，无需任何其他配置：

npm init -y

如下所示，package.json 文件已创建，其中包含一些非常基本的信息。

2.使用一些额外的配置设置创建 package.json 文件

npm init

我在我们新创建的 package.json 文件中添加了一些东西，比如一些很好的 keywords，一个repo等等...

之后，在根目录下创建 src 文件夹，然后在 src 下分别创建 index.html 和 index.js.

1.Linux / MacOS 命令

mkdir src
touch src/index.html
touch src/index.js

2.Windows 命令

mkdir src
echo "" > srcindex.html
echo "" > srcindex.js

创建完后在 index.html 添加以下内容。

接着在 index.js 中添加一些内容，目前只是为了展示一些内容，下面继续完善。

(function () {
  console.log("hey mister");
}());

此时，目录结构如下：

将 Webpack 添加到项目中

安装 Webapck 及所需的开发环境依赖模块。

npm install --save-dev webpack webpack-cli webpack-dev-server

webpack

用来配置我们的新应用

本文所用的版本是 4.19.0

webpack-cli

可以在命令行中使用 Webpack 了

本文所用的版本是 3.1.0

webpack-dev-server

这样，当我们对新应用程序中的文件进行更改时，就不需要刷新页面了。每当我们在应用程序中更改文件时，它会自动刷新浏览器页面

本文所用的版本是 3.1.8

看一下package.json文件，将看到这三个包被添加到这个文件中，如下所示：

"devDependencies": {
  "webpack": "^4.19.0",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.8"
}

补充说明一下版本号前的 ^,~ 的区别

指定版本：比如"webpack": "4.19.0"，表示安装 4.19.0 的版本

波浪号 ~ 指定版本：比如 "webpack-cl": "~3.1.0",表示安装 3.1.0 的最新版本（不低于1.1.0），但是不安装 1.2.x，也就是说安装时不改变大版本号和次要版本号

^ 指定版本：比如 "webpack-dev-server": "^3.1.8",，表示安装 请输入代码3.1.4 及以上的版本，但是不安装4.0.0，也就是说安装时不改变大版本号。

package.json 文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次 npm install 都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以 package-lock.json 文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。

所以当我们 npm install 安装完插件后，都会生成两个文件一个是 node_modules 和 package-lock.json 。

这里为了版本的一致性，我把 package.json 里的 版本号前面 ^ 删除了。

接着新建 Webpack 配置文件 webpack.config.js：

1.Linux/MacOS 命令

touch webpack.config.js

2.Windows 命令

echo "" > webpack.config.js

如果你不想使用命令行，也可以简单地手动创建文件。

在开始处理 Webpack 配置文件之前，先在应用程序中安装一些我们需要的东西。

首先安装 path 作为开发环境的路径依赖。

npm install --save-dev path

此外，由于不想在 HTML 中手动注入 index.js 文件，因此需要安装 html-webpack-plugin 的插件。 此插件通过配置在 HTML 文件中注入 index.js，无需手动操作。

npm install --save-dev html-webpack-plugin

再次，我将 package.json 文件删除所有 ^。

安装完后在 package.json 文件中的 scripts 属性里添加以为内容：

"webpack": "webpack",
"start": "webpack-dev-server --open"

现在 package.json 内容如下：

{
  "name": "react-webpack-babel-tutorial",
  "version": "1.0.0",
  "description": "This is a Tutorial to showcase the usage of React with Webpack and Babel",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "webpack": "webpack",
    "start": "webpack-dev-server --open"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/react-webpack-babel-tutorial.git"
  },
  "keywords": [
    "react",
    "webpack",
    "babel",
    "creative-tim",
    "material-design"
  ],
  "author": "Creative Tim  (https://www.creative-tim.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/creativetimofficial/react-webpack-babel-tutorial/issues"
  },
  "homepage": "https://github.com/creativetimofficial/react-webpack-babel-tutorial#readme",
  "devDependencies": {
    "html-webpack-plugin": "3.2.0",
    "path": "0.12.7",
    "webpack": "4.19.0",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.8"
  }
}

接着运行以下命令，看看会发生什么：

npm run webpack

Webpack 将自动获取 src/index.js 文件，编译它，并将其输出到 dist/main.js 中，并压缩代码。这是因为我们还没有配置 Webpack 配置文件。此外，由于我们还没有配置该文件，我控制台中将出现一些警告。

如果我们运行如下命令：

npm start

webpack-dev-server 将自动启动服务器并使用该服务器打开默认浏览器。但是，由于我们没有配置webpack.config.js 文件，所以页面展示并不是我们想要的内容。

如果想停止服务，只需在命令行中同时按下 CTRL + C 键。

接着在 webpack.config.js 添加以下内容：

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname,"src","index.js"),
  output: {
    path: path.join(__dirname,"build"),
    filename: "index.bundle.js"
  },
  mode: process.env.NODE_ENV || "development",
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]
  },
  devServer: {
    contentBase: path.join(__dirname,"src")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname,"src","index.html")
    })
  ]
};

1.entry

entry 可以是个字符串或数组或者是对象。 当 entry 是个字符串的时候，用来定义入口文件：

entry: "./js/main.js"

当 entry 是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server 会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：

entry: [
     "webpack/hot/only-dev-server",
     "./js/app.js"
]

当 entry 是个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用，比如在我的 hello 页面中只要 引入 hello.js 即可：

 entry: {
     hello: "./js/hello.js",
     form: "./js/form.js"
 }

2.output

output 参数是个对象，用于定义构建后的文件的输出。其中包含 path 和 filename：

output: {
     path: "./build",
     filename: "bundle.js"
 }

3.mode

这是输出的模式，这里将其 mode 设置为 “development”。如果在脚本中指定 NODE_ENV 变量，那么它将使用这个变量。请参阅下面关于如何使用 NODE_ENV 的示例(请注意，本教程中的 package.json 文件中不会进行以下更改，这只是一个示例，可以看到它是如何工作的）

"webpack": "NODE_ENV=production webpack",

4.resolve

webpack 在构建包的时候会按目录的进行文件的查找，resolve 属性中的 extensions 数组中用于配置程序可以自行补全哪些文件后缀：

resolve:{
  extensions:["",".js",".json"]
}

5.devServer

这告诉 webpack-dev-server 需要提供哪些文件。 这里是 src 文件夹中的所有内容都需要在浏览器中浏览。

6.plugins

在这里，我们设置了我们的应用程序中需要的插件。到目前为止，只需要 html-webpack-plugin，它告诉服务器 index.bundl.js 应该被注入到 index.html 文件中

再次运行以下命令，显示会跟上一次不同：

npm run webpack

webpack-dev-server 从 src 文件夹中读取所有内容并输出到我们的浏览器中。

配置 React，Babel 与 styles loaders

通过运行以下命令来引入 React :

npm i react react-dom --save-dev

在我们的开发过程中，如果我们在 JS 文件中添加React代码，Webpack 会给我们一个错误，它不知道如何在bundle.js 文件中编译 React。

修改 index.js 内容如下：

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

let HelloWorld = () => {
  return 
Hello there World!
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

再次运行以下命令：

npm start

错误如下：

所以这就是 Babel 出现的原因， Babel 将告诉 Webpack 如何编译 React 代码。

安装 Babel 相关依赖：

npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

@babel/core

这是将ES6及以上版本编译成ES5

@babel/node

babel-node 是 babel-cli 的一部分，它不需要多带带安装。

它的作用是在 node 环境中，直接运行 es2015 的代码，而不需要额外进行转码。例如我们有一个 js 文件以 es2015 的语法进行编写(如使用了箭头函数)。我们可以直接使用 babel-node es2015.js 进行执行，而不用再进行转码了。

可以说：babel-node = babel-polyfill + babel-register

@babel/preset-react

这个是把 React 代码编译成 ES5 代码。

babel-loader

和 babel-cli 一样，babel-loader 也会读取 .babelrc 或者 package.json 中的 babel 段作为自己的配置，之后的内核处理也是相同。唯一比 babel-cli 复杂的是，它需要和 webpack 交互，因此需要在 webpack 这边进行配置。比较常见的如下：

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: "babel-loader"
    }
  ]
}

如果想在这里传入 babel 的配置项，也可以把改成：

// loader: "babel-loader" 改成如下：
use: {
  loader: "babel-loader",
  options: {
    // 配置项在这里
  }
}

我们需要为项目中添加一些样式，此时就需要使用样式相关的加载器，这边使用 scss,安装命令如下：

npm install --save-dev style-loader css-loader sass-loader node-sass

style-loader

通过注入