webpack4+react+antd从零搭建React脚手架（一）

2023-05-16

本人是在windows环境下搭建的，ios自行摸索。
代码地址PreByter

项目初始化

首先就是项目初始化，一定确保安装node或者yarn二者均可，

npm init
//或者
yarn init

此时会生成package.json文件，这个文件包含的项目描述，版本号，作者，项目地址等等。当然这里是一直回车的。所以不用在意的。

安装webpack

yarn add webpack webpack-cli -D
// or
npm install --save-dev webpack  webpack-cli

这里解释一下（仅限个人理解）
--save-dev是将依赖安装到开发环境中，即在package.json中的devDependencies目录下。--save是安装到生产环境中也就是在package.json中的dependencies目录下。同理-D是安装到开发依赖。-S是安装到生产依赖。

建立webpack配置文件

在根目录下建立build文件夹，分别新建三个名为的webpack.base.conf、webpack.dev.conf、webpack.prod.conf的js。分别是公共配置，开发配置，生产配置。
webpack的文档地址webpack;里面有详细的解释。

// webpack.base.conf.js 文件
const path = require('path'); //node.js自带的路径参数
const DIST_PATH = path.resolve(__dirname, '../dist'); //生产目录
const APP_PATH = path.resolve(__dirname, '../src'); //源文件目录

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: 'js/[name].[hash].js', //使用hash进行标记
    path: DIST_PATH
  },
 },

这里因为分成3个配置文件所以需要webpack-merge来进行合并，当然也可以不使用同一放到一个配置里。

npm install --save-dev webpack-merge

在 ** webpack.prod.conf.js** 里面使用

// webpack.prod.conf.js 文件
const merge = require('webpack-merge'); //合并配置
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
    mode: 'production',  //mode是webpack4新增的模式
});

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

const element =document.getElementById('root');
element.innerHTML = 'hello, world!';

在根目录创建一个public文件夹，然后新建一个index.html文件

<!-- index.html -->
// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>webpack4+react+antd从零搭建React脚手架</title>
  </head>
  <body>
        <div id="root"></div>
        <script src="../dist/js/bundle.js"></script>
  </body>
</html>

当前的目录树

|- /src
    |- index.js
  |- /node_modules
  |- /public
    |- index.html
  |- /build
    |- webpack.base.conf.js
    |- webpack.prod.conf.js
  |- package.json
  |- package-lock.json

在package.json文件 scripts属性添加一个build命令

// package.json
"scripts": {
    "build": "webpack --config build/webpack.prod.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},

先不要运行，运行也会报错的。

安装React

yarn add react react-dom -S

同样官方文档也给了一些指导在一分钟内添加-react。
对index.js进行编辑

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

ReactDom.render(
    <h1>hello, world!</h1>,
    document.getElementById("root")
);

注意，react使用的是es6，这里需要将代码转成es5，所以需要安装babel。
Babel的官方文档地址Babel。这里也有bable在webpack的配置的介绍babel in webpack。对react的介绍babel in react。

安装Babel

npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react

在根目录下创建.babelrc文件，配置presets.

{
  "presets": [
	 "env",
    "react"
  ]
}

然后修改webpack.base.conf.js文件

// webpack.base.conf.js
const path = require('path');
const APP_PATH = path.resolve(__dirname, '../src');
const DIST_PATH = path.resolve(__dirname, '../dist');
module.exports = {
    entry: {
        app: './app/index.js'
    },    
    output: {
        filename: 'js/bundle.js',
        path: DIST_PATH
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                use: "babel-loader",
                include: APP_PATH
            }
        ]
    }
};

运行 npm run build

然后就会出现各种奇葩的错误。我是正好处于babel从6.x版本升级到7.x版本的时候，所以导致有些插件npm库里是没有升级的，谷歌好久，是一个外国的小哥说，babel的各版本不兼容导致的。
所以在这里进行了版本降级，pack.json中的代码

	"babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.0.2",
    "babel-plugin-import": "^1.9.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",

这样就奇迹般的好了。

webpack的插件

HtmlWebpackPlugin

自动生产出html 的文件。

安装HtmlWebpackPlugin

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

修改public中的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>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>
<body>
</body>
</html>

webpack.prod.conf.js中配置plugins属性

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
		      template: 'public/index.html',
		      title: 'PresByter', //更改HTML的title的内容
		      minify: {
		        removeComments: true,
		        collapseWhitespace: true,
		        removeAttributeQuotes: true
		      },
   		 }),
    ]
});

index.js

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

const Div = document.createElement("div");
Div.setAttribute("id", "root")
document.body.appendChild(Div)

ReactDom.render(
  <div>
    <h1>hello, world!333</h1>
  </div>,
  document.getElementById("root")
);

这样就可以自动加载js文件了。
可以 yarn run build

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)