从0到1搭建React开发环境(一)：基础篇 #14

QC-L · 2018-02-07T07:12:28Z

配置

Yarn
webpack
Babel
ES6
React

初始化

创建工作目录, hello-react-webpack:

mkdir hello-react-webpack
cd hello-react-webpack
yarn init

配置基本 webpack

yarn add webpack --dev

创建 webpack.config.js :

touch webpack.config.js

配置基本入口，出口:

const path = require('path');
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"), // 根据当前路径生成，dist绝对路径
    filename: "bundle.js"
  }
}

配置 babel v7

yarn add @babel/preset-react @babel/preset-env @babel/core babel-loader@8.0.0-beta.0 --dev

创建 .babelrc 文件，加入如下代码:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

配置 webpack.config.js :

const path = require('path');
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "bundle.js",
    public: "/"
  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: "babel-loader"
+      }
+    ]
+  }
}

配置 React

下载 react 、react-dom:

yarn add react react-dom

创建 src/index.js

mkdir src
touch src/index.js

在 index.js 中，编写如下代码:

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

ReactDOM.render(
  <h1>测试</h1>,
  document.getElementById("root")
);

配置 html-webpack-plugin

下载插件 html-webpack-plugin:

yarn add html-webpack-plugin --dev

在 webpack.config.js 中配置 plugins:

const path = require('path');
+ const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
 /* ... */
+ plugins: [
+   new HTMLWebpackPlugin({
+     template: "index.html",
+     filename: "index.html",
+     inject: "body"
+   })
+ ]
}

在根目录创建 index.html

touch index.html

编写如下内容:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="root"></div>  
</body>
</html>

配置 webpack-dev-server

安装 wepack-dev-server:

yarn add webpack-dev-server --dev

因为使用 webpack-dev-server 会涉及到热更新，因此需要在 webpack.config.js 中添加插件:

const path = require('path');

const HTMLWebpackPlugin = require("html-webpack-plugin");
+ const webpack = require("webpack");
module.exports = {
 /* ... */
  plugins: [
    new HTMLWebpackPlugin({
      template: "index.html",
      filename: "index.html",
      inject: "body"
    }),
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin()
  ]
}

并配置 inline 和 hot

devServer: {
  inline: true,
  hot: true
}

配置 CSS

安装 style-loader 及 css-loader :

yarn add style-loader css-loader --dev

在 webpack.config.js 中的 rules 添加

module: {
  rules: [
      {
        test: /\.js$/,
        use: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
  ]
}

配置 `package.json` 的 `scripts`

在 package.json 中添加如下代码:

"scripts": {
  "start": "webpack-dev-server"
},

最后, 执行 start 即可:

yarn start

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

从0到1搭建React开发环境(一)：基础篇 #14

从0到1搭建React开发环境(一)：基础篇 #14

QC-L commented Feb 7, 2018 •

edited

从0到1搭建React开发环境(一)：基础篇 #14

从0到1搭建React开发环境(一)：基础篇 #14

Comments

QC-L commented Feb 7, 2018 • edited

配置

初始化

配置基本 webpack

配置 babel v7

配置 React

配置 html-webpack-plugin

配置 webpack-dev-server

配置 CSS

配置 package.json 的 scripts

QC-L commented Feb 7, 2018 •

edited

配置 `package.json` 的 `scripts`