最近有個項目需要react，我尼瑪是個忠實的Vue黨，但是粑粑還是粑粑，開始學習，本教程只適合於新手，或者學生黨，我會竟可能的寫詳細，大家一起學習
01 webpack流程化安裝
主要是爲了熟悉react的目錄結構，指令什麼的，以及一些基礎的webpack，會有很多配置的東西
01創建目錄
mkdir react-demo // 新建項目文件夾
cd react-demo // cd到項目目錄下
npm init // npm初始化
webpack 的一些操作
npm i webpack webpack-cli --save--dev
touch webpack.config.js
webpack配置文件
/*
* @Descripttion: webpack.config.js
* @version: ON||FOR
* @@Company: DCIT-SH
* @Author: Oneself
* @Date: 2020-11-27 16:37:06
* @LastEditors: Oneself
* @LastEditTime: 2020-11-27 16:39:44
* @Statu: TODO: webpack配置文件
*/
const path = require('path');
module.exports = {
entry: './src/app.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 定義輸出目錄
filename: 'bundle.js' // 定義輸出文件名稱
}
};
package.json 添加webpack執行命令
"scripts": {
"build": "webpack --config webpack.config.js"
}
因爲我們的入口文件是'./src/app.js'，而我們執行build的時候會先到入口文件，我感覺的這個就像是thinkphp或者一些後端框架的 index.php，或者admin.php （意思上）而現在我們並沒有入口文件，創建src目錄，創建app.js
npm run build
在我們的根目下會生成一個dist目錄，一個bundle.js
02webpack-dev-server
webpack-dev-server是一個小型的node.js Express服務器,它使用webpack-dev-middleware中間件來爲通過webpack打包生成的資源文件提供Web服務。
npm install --save-dev webpack-dev-server
package.json 更新命令
"scripts": {
"dev":"webpack-dev-server"
}
添加配置
webpack.config.js新增devServer配置
devServer: {
hot: true, // 熱替換
contentBase: path.join(__dirname, 'dist'), // server文件的根目錄
progress:true,//開啓進度條
compress: true, // 開啓gzip
//open:true, //自動打開瀏覽器,
port: 8080, // 端口
},
報錯 Cannot find module 'webpack-cli/bin/config-yargs'
這個錯誤格外的眼熟，剛學webpack時候就遇到過，
package.json 改成如下版本
方法1：前提是你知道你依賴的版本
"webpack-dev-server": "^依賴版本"
刪除node_modules文件夾
npm i
方法2：最新版本
npm uninstall webpack-dev-server -g 卸載全局
npm uninstall webpack-dev-server -D 卸載局部(本地)
npm install webpack-dev-server --save-dev 最新
方法3 看下以前項目的啓動版本
npm i [email protected] [email protected] [email protected] webpack-dev-server -D
麻蛋的又報錯了
Error: spawn cmd.exe ENOENT
看到這個錯誤的時候，我們就要考慮下， cmd.exe
定位錯誤的話，應該是我們的電腦問題，一般是環境變量，
在後端的日常中，我們會調用一些exe程序進行加密，拆解，拼圖，會因爲你的exe文件沒有配置到電腦的環境變量，而找不到程序，
我查了下 cmd.exe是用戶環境變量中加入System32
添加環境變量
cmd.exe 在哪個文件夾
C:\Windows\System32
還是不行，我百度了下，需要重啓下電腦。我坲了
OK重啓後可以正常啓動
03安裝 HtmlWebPackPlugin
說白就是html生成器，HTML模板插件 讓webpack 簡化了HTML文件的創建
HtmlWebPackPlugin
爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題
可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口
npm install --save-dev html-webpack-plugin
webpack.config.js 添加配置 添加在 module.exports
// 引入html插件文件
const HtmlWebPackPlugin = require('html-webpack-plugin');
---------------------------
plugins: [
new HtmlWebPackPlugin({
// template是模板文件需要我們創建
template: './public/index.html',
filename: path.resolve(__dirname, 'dist/index.html')，
minify: {
//true不換行
collapseWhitespace: true
},
hash: true //生產環境下生成hash戳
})
]
npm run dev
多頁面應用，我在網上看的時候，這個東西用的不是很多，但是有些面試題會問，多頁面應用說白了就是多個入口，和後端那些框架的設計模式差不多，
webpack.config.js
module.exports = {
// 多入文件
entry: {
index: "./src/index.js", // 前臺入口
admin: "./src/admin.js" // 後臺入口
},
output: {
path: path.resolve(__dirname, 'dist'), // 定義輸出目錄
filename: '[name].js', // 定義輸出文件名稱 [name]自動獲取入口的home和admin, 將entry中的鍵提取出來
publicPath: "/" //build之後的公共路徑
},
plugins: [
new HtmlWebPackPlugin({
// template是模板文件需要我們創建
template: './public/index.html',
filename: path.resolve(__dirname, 'dist/index.html'),
chunks:['index'],//只引用index.js,解決index.html裏面有index.js和admin.js的問題
minify: {
//摺疊換行true不換行
collapseWhitespace: true
},
hash: true //生產環境下生成hash戳
}),
new HtmlWebPackPlugin({
// template是模板文件需要我們創建
template: './public/admin.html',
filename: path.resolve(__dirname, 'dist/admin.html'),
chunks:['admin'],//只引用index.js,解決index.html裏面有index.js和admin.js的問題
minify: {
//摺疊換行true不換行
collapseWhitespace: true
},
hash: true //生產環境下生成hash戳
})
]
}
感覺我註釋寫的很清楚了，簡單的說就是添加幾個辨別項，將單頁面轉化爲多頁面，記得根據入口文件新建文件entry下現在是兩個入口文件
npm run build
在我們指定的目錄下會生成dist index.js index.html ,admin.js admin.js 但是我看到了警告，
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ε=(´ο｀*)))唉，我給忘了一個mode，雖然不印象打包，但是還是看着挺難受的，在 module.exports中配置
//模式 默認兩種production(生產環境:代碼壓縮) development(開發環境:代碼不壓縮)
mode: "development",
04loaders 配置css
npm install --save-dev css-loader style-loader mini-css-extract-plugin
css-loader：解析@import這種語法
style-loader：把css插入到head標籤中
mini-css-extract-plugin:抽離css樣式讓index.html裏面的css樣式變成link引入
配置 webpack.config.js
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 在插件中引用
plugins: [
new MiniCssExtractPlugin({
filename: "static/css/main.css",
}),
]
// 在模塊中,配置不同的規則
module: {
//規則
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, //都放到了上面的main.css裏面
{
loader: "css-loader",
},
],
},
],
},
然後我們測試下,看看是否將css引用了,在src目錄下新建assets目錄,新建兩個css文件,在index.js中
@import '你放置css的位置'
npm run dev
/*就會發現,你寫的css已經加載到css中了, @import也可以在css中使用,將公共的類,和當前css*/
npm run build
/*就會生成對應配置的目錄結構 . static/css/main.css
css兼容性處理
npm install --save postcss-loader autoprefixer
05配置 css 兼容性 webpack.config.js
// 在css 規則 中添加 一個新的postcss-loader規則 寫在css配置的use中
{ loader: "postcss-loader" },
在根目錄下新建 postcss.config.js 配置瀏覽器建兼容
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
}
}
};
打包後查看我們的dist文件夾下css,自動生成css文件
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
webpack.config.js 配置會越來越大，位置會越來越多，建議學習下 webpack
06配置 css 壓縮
npm install --save optimize-css-assets-webpack-plugin
//引入css壓縮
let OptimizeCss = require("optimize-css-assets-webpack-plugin");
// 添加配置
optimization: {
minimizer: [
new OptimizeCss(), //優化css
],
},
需要配置mode模式
07配置 js 壓縮
npm install --save uglifyjs-webpack-plugin
//js壓縮
let UglifyjsPlugin=require('uglifyjs-webpack-plugin');
minimizer: [
//壓縮js
new UglifyjsPlugin({
cache:true, //是否用緩存
parallel:true, //是否併發打包
sourceMap:true //es6映射es5需要用
}),
]
08配置圖片
npm install --save-dev url-loader
// 配置
module:{
rules: [
{
test:/\.(png|jpg|gif|jpeg)$/,
use:{
loader:"url-loader", //file-loader加載圖片，url-loader圖片小於多少k用base64顯示
options: {
limit:100*1024, //小於100k用base64
//build之後的目錄分類
outputPath:'static/images' },
}
},
]
}
09es6轉es5 配置
npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime
10安裝react
npm i react react-dom --save
npm i babel-preset-react --save-dev
安裝babe
npm install babel-loader@next @babel/core @babel/preset-react @babel/runtime --save
Babel 是一個 JavaScript 編譯器 （說白就是爲了解析js代碼）
Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。下面列出的是 Babel 能爲你做的事情：
- 語法轉換
- 通過 Polyfill 方式在目標環境中添加缺失的特性 (通過 @babel/polyfill 模塊)
- 源碼轉換 (codemods)
更新webpack.config.js
module: {
rules: [
{
test: /\.(js | jsx)$/, // 因爲react是jsx，需要添加jsx
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
更新index.js
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component{
render(){
return(
<div>Hello React!</div>
)
}
}
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
將index.js ReactDOM.render(<App />, document.getElementById("app")); 拋出的節點綁定到文件流中
更新public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 首頁 </title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
代碼
參考：
https://react.docschina.org/tutorial/tutorial.html
https://segmentfault.com/a/1190000017945643
https://blog.csdn.net/pippa134679/article/details/85322865
----待更新