react-cli-diy
從0開始使用webpack構建一個自己的React腳手架
項目使用：
git clone [email protected]:TigerHee/react-cli-diy.git
cd react-cli-diy
npm install
開發模式啓動：
npm run dev
生產打包：
npm run build實現步驟：
首先在新建一個項目目錄，在此目錄內執行npm init初始化項目環境。
創建webpack配置文件：
- webpack.config.js //公共配置
- webpack.prod.js //生產環境配置
- webpack.dev.js //開發環境配置
創建public目錄存放html模版文件。
創建src目錄存放前端項目所需資源。
安裝webpack相關依賴：
npm i webpack webpack-cli webpack-merge -D
修改webpack.config.js文件：
module.exports = {
entry: './src/index.js', // 入口
output: { // 出口
filename: 'bundle.[hash:8].js',
path: path.resolve(__dirname, 'dist')
},
}使用webpack-merge包merge公共配置文件分別到生產和開發配置文件：
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.js')
module.exports = merge(baseConfig, {
// 各自單獨的配置
})安裝本地服務及使用html模版相關依賴：
npm i webpack-dev-server html-webpack-plugin -D
公共配置內使用html-webpack-plugin來使用index.html模版：
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
hash: true, // 添加hash值解決緩存問題
minify: { // 對打包的html模板進行壓縮
removeAttributeQuotes: true, // 刪除屬性雙引號
collapseWhitespace: true // 摺疊空行變成一行
}
}),
]開發模式需要使用到開發服務器：
devServer: { // 內置開發服務器配置
port: 3000,
progress: true,
contentBase: './dist',
open: true,
proxy: {
//設置開發時接口代理地址
}
},配置好上訴基本配置之後在package.json內設置啓動腳本：
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --config webpack.dev.js"
},接下來在公共配置裏設置處理css與less：
rules:[
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
},
]postcss-loader處理兼容前綴需要一個單獨的配置文件postcss.config.js。
如上述配置處理css的話，樣式文件被插入到html模版內，我們想抽離css文件，通過link方式引入：
npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
{
module:{
rules: [
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader'
]
},
]
},
plugins: [
// 抽離css插件
new MiniCssExtractPlugin({
filename: '[name].[hash:8].css',
chunkFilename: '[id].[hash:8].css',
}),
]
}此時在執行npm run build的時候發現，每次打包上次的打包結果都沉積在哪裏需要先清除：
npm i clean-webpack-plugin -D
修改生產環境配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
//每次打包前刪除清空dist
new CleanWebpackPlugin(),
]
用了mini-css-extract-plugin抽離css爲link需使用optimize-css-assets-webpack-plugin進行壓縮css,使用此方法壓縮了css需要uglifyjs-webpack-plugin壓縮js：
npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
optimization: { // 優化項
minimizer: [
new UglifyJsPlugin({ // 優化js
cache: true, // 是否緩存
parallel: true, // 是否併發打包
}),
new OptimizeCSSAssetsPlugin({}) // css 的優化
]
},在公共配置裏設置處理js與jsx：
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators -D
再加上React的babel：
npm i @babel/preset-react -D
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
},
exclude: /node_modules/
},項目添加React相關依賴：
npm i react react-dom -S
在index.js內書寫React代碼，嗯~~~，可以運行。
再在公共配置里加上圖片處理：
npm i file-loader url-loader -D
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 200 * 1024, // 小於200k變成base64
}
}
}在less內加個background-image試試，ok。
開發模式需要監聽更改熱更新：
watch: true,
watchOptions: {
poll: 1000, // 每秒監聽1000次
aggregateTimeout: 300, // 防抖，當第一個文件更改，會在重新構建前增加延遲
ignored: /node_modules/ // 可以排除一些巨大的文件夾，
},最後npm run build和npm run dev都可以完美運行了，腳手架構建成功。