使用 Webpack 4 and Babel 从零构建 React 项目

创建目录结构

mkdir react-boilerplate
cd react-boilerplate
mkdir -p src/components src/styles

初始化项目

npm init

这一步会创建 Package.json 文件

初始化 Webpack

npm install webpack webpack-cli -S

webpack用于打包项目,webpack-cli帮助我们可以在命令行中使用webpack

初始化webpack

npm install react react-dom --save

初始化Babel

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
  • babel-core:ES6 => ES5
  • babel-loader:预设条件下,webpack转译代码
  • babel-preset-env:Preset帮助babel将ES6,ES7,ES8代码转换为ES5
  • babel-preset-react:JSX => JavaScript

在/src下创建index.js以及index.html

入口文件和出口文件

在根目录下创建webpack.config.js,为loader制定一些规则。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "index_bundle.js"
  }
};

webpack会打包所有js文件在index_bundel.js(在/dist目录下)中

Webpack Loaders

在webpack.config.js中,添加

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

npm install **css-loader** **style-loader** --save-dev

  • babel-loader用来载入jsx/js文件
  • css-loader用来打包css文件到一个文件中
  • style-loader用来加载样式

.babelrc

在根目录下新建.babelrc文件,添加

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
  • env:ES6/ES7/ES8 => ES5
  • JSX => ES5

通过Webpack编译文件

在package.json中的script属性加入:

"start": "webpack --mode development --watch",
"build": "webpack --mode production"
  • watch:任何时候资源文件发生改变,webpack都会自动编译
  • webpack 4有两种模式,分别是开发模式和生产模式

执行下面命令

npm start

你会在/dist文件夹下看到index_bundle.js文件

安装 Webpack-dev-server

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

修改package.json中的start脚本属性

"start":"webpack-dev-server --mode development --open --hot"

–open和–hot是用来打开浏览器并在你修改文件的时候即时刷新浏览器的

再次

npm start

大功告成!