源碼地址 順手求一波star
項目使用：
git clone git@github.com:TigerHee/react-cli-diy.git
cd react-cli-diy
npm install
開發(fā)模式啟動：
npm run dev
生產打包：
npm run build
實現步驟：
首先新建一個項目目錄眼滤，在此目錄內執(zhí)行npm init初始化項目環(huán)境庭敦。
創(chuàng)建webpack配置文件：
- webpack.config.js //公共配置
- webpack.prod.js //生產環(huán)境配置
- webpack.dev.js //開發(fā)環(huán)境配置
創(chuàng)建public目錄存放html模版文件。
創(chuàng)建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公共配置文件分別到生產和開發(fā)配置文件：
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 // 折疊空行變成一行
}
}),
]
開發(fā)模式需要使用到開發(fā)服務器：
devServer: { // 內置開發(fā)服務器配置
port: 3000,
progress: true,
contentBase: './dist',
open: true,
proxy: {
//設置開發(fā)時接口代理地址
}
},
配置好上訴基本配置之后在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',
}),
]
}
此時在執(zhí)行npm run build的時候發(fā)現，每次打包上次的打包結果都沉積在哪里需要先清除：
npm i clean-webpack-plugin -D
修改生產環(huán)境配置：
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: { // 優(yōu)化項
minimizer: [
new UglifyJsPlugin({ // 優(yōu)化js
cache: true, // 是否緩存
parallel: true, // 是否并發(fā)打包
}),
new OptimizeCSSAssetsPlugin({}) // css 的優(yōu)化
]
},
在公共配置里設置處理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。
開發(fā)模式需要監(jiān)聽更改熱更新：
watch: true,
watchOptions: {
poll: 1000, // 每秒監(jiān)聽1000次
aggregateTimeout: 300, // 防抖姓赤，當第一個文件更改赡译，會在重新構建前增加延遲
ignored: /node_modules/ // 可以排除一些巨大的文件夾，
},
最后npm run build和npm run dev都可以完美運行了不铆，腳手架構建成功蝌焚。
定義可能會用到的全局環(huán)境變量：
const webpack = require('webpack');
// 生產環(huán)境：
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify('PROD')
})
]
// 開發(fā)環(huán)境：
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify('DEV')
})
]
再在壓縮代碼里加個版權聲明:
const webpack = require('webpack');
plugins: [
new webpack.BannerPlugin('tigerHee 2019')
]
