參考1: https://segmentfault.com/a/1190000012631766
參考2: https://beanlee.github.io/2018/06/11/something-about-webpack-4/
必要背景知識
- yarn 解決了什么？
- webpack 的意義？
構(gòu)建流程
1. 創(chuàng)建項目
1.1 項目初始化
-
yarn init: 填寫必要的項目信息 -
vim .gitignore: 按照網(wǎng)上提供的模板填寫gitignore文件 - 規(guī)劃項目目錄：
|---
|--dist //存放webpack打包后相關(guān)文件
|--src //存放項目源碼
|--index.js
|--config //項目相關(guān)的配置文件
|--webpack.config.js //webpack默認讀取項目根目錄下的webpack.config.js文件作為配置信息，為了規(guī)范化移入到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 轉(zhuǎn)義，此處既可以在項目根目錄下創(chuàng)建 .babelrc 文件，也可以稍后在 webpack.config.js 中配置，這里我們選擇在后者統(tǒng)一配置。
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 轉(zhuǎn)義的配置選項
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 創(chuàng)建基礎(chǔ)文件
- 在
src目錄下創(chuàng)建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內(nèi)容如下：
import App from './App';
- 接著創(chuàng)建 html 文件，在
src下創(chuàng)建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服務(wù)器進行訪問測試。
接下來： XXX - 之二
