参考1: https://segmentfault.com/a/1190000012631766
参考2: https://beanlee.github.io/2018/06/11/something-about-webpack-4/
必要背景知识
- yarn 解决了什么？
- webpack 的意义？
构建流程
1. 创建项目
1.1 项目初始化
-
yarn init: 填写必要的项目信息 -
vim .gitignore: 按照网上提供的模板填写gitignore文件 - 规划项目目录：
|---
|--dist //存放webpack打包后相关文件
|--src //存放项目源码
|--index.js
|--config //项目相关的配置文件
|--webpack.config.js //webpack默认读取项目根目录下的webpack.config.js文件作为配置信息，为了规范化移入到config目录下
|--package.json
|--.gitignore
1.2 安装配置webpack
-
yarn add webpack: 安装webpack，如果询问是否安装webpack-cli，确认安装即可 - 编辑
webpack.config.js文件(webpack的配置文件)，更多配置项参考官方文档：
const path = require("path");
const base = path.join(__dirname, "..");
module.exports = {
mode: "production",
entry: path.resolve(base, "src", "index.js"),
output: {
filename: "bundle.js",
path: path.resolve(base, "dist")
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
]
},
plugins: [
]
};
- 配置打包命令: 为了能快速地启动项目，可以配置一下
package.json文件
//package.json
{
"scripts": {
"build": "webpack --config config/webpack.config.js",
"dev": "webpack-dev-server --config config/webpack.config.dev.js"
}
}
配置完成后就可以在命令行下直接使用yarn run build命令了。
2. 集成React
2.1 安装React组件
## 安装 react
yarn add react react-dom
## 安装 babel
yarn add @babel/core @babel/preset-env --dev
## 安装 babel-react
yarn add @babel/preset-react "babel-loader@^8.0.0-beta" --dev
## 安装 webpack html工具
yarn add html-webpack-plugin
注意：这里使用 babel 转义，此处既可以在项目根目录下创建 .babelrc 文件，也可以稍后在 webpack.config.js 中配置，这里我们选择在后者统一配置。
2.2 更新webpack配置
/// webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { // babel 转义的配置选项
babelrc: false,
presets: [
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), { modules: false }],
],
cacheDirectory: true,
},
},
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: "src/index.html",
filename: "index.html"
})
]
2.3 创建基础文件
- 在
src目录下创建App.jsx：
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>Hello React and Webpack</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
- 在
src下新建index.jsx内容如下：
import App from './App';
- 接着创建 html 文件，在
src下创建index.html:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Hello React Webpack</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
完成这些之后，项目就可以运行了，使用yarn build之后，webpack会将项目打包到dist文件夹下，你可以在dist下使用python -m SimpleHTTPServer 3003开启一个简单的web服务器进行访问测试。
接下来： XXX - 之二
