本人是在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