歡迎加入qq群：36952712
如果只是想試試 React，那么建議使用 create-react-app來創建一個react項目。愛掏網 - it200.com快速開始
因為 create-react-app 和 vue-cli 不一樣，create-react-app將webpack的相關配置直接封裝好了，所以自定制化程度不高，所以考慮手動構建一個 React項目代碼下載
準備工作
- 安裝node環境。愛掏網 - it200.com
- 配置cnpm(看個人需求)。愛掏網 - it200.com
- 準備一個空的文件夾react-demo。愛掏網 - it200.com
初始化工程
從這里開始新建一個react工程
1. 初始化工程目錄
1 cd react-demo 2 npm init
?
一路回車，我們將得到一個最簡單的npm目錄，會包含一個package.json。愛掏網 - it200.com
// package.json { "name": "react-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
?
然后在react-demo目錄下新建一個程序的主目錄" src " 目錄。愛掏網 - it200.commddir src
2. 配置工程
1. webpack初體驗
首先安裝webpack和webpack-cli。愛掏網 - it200.com webpack4.X
npm install --save-dev webpack webpack-cli -g
?
Q：--save-dev 和 --save的區別
A：--save-dev是你開發時候依賴的東西，--save是你發布之后依賴的東西。愛掏網 - it200.com區別
TIPS: -g表示全局安裝，--save-dev 可以簡寫為 -D ，--save 可以簡寫為 -S ，npm install 可以簡寫為 npm i
新建并配置webpack
新建webpack.config.js 文件。愛掏網 - it200.com首先要理解webpack的幾個基礎概念入口(entry)、出口(output)、載入器(loader)、插件(plugins)、模式(mode) 。愛掏網 - it200.comwebpack中文文檔。愛掏網 - it200.com代碼如下：
1 // __dirname是node.js中的一個全局變量，它指向當前執行腳本所在的目錄 2 // path是node.js中提供的處理文件路徑的小工具。愛掏網 - it200.com (http://www.runoob.com/nodejs/nodejs-path-module.html) 3 const path = require('path'); 4 module.exports = { 5 // 項目入口，webpack從此處開始構建 6 entry: { 7 main: path.join(__dirname, 'src/index.js'), // 指定入口，可以指定多個。愛掏網 - it200.com參考webpack文檔 8 }, 9 output: { 10 path: path.join(__dirname, "dist"), // bundle生成(emit)到哪里 11 filename: "bundle.js", // bundle生成文件的名稱 12 }, 13 }
?
- 這樣就完成了最簡單的webpack配置文件。愛掏網 - it200.com相應的我們需要在src目錄下新建一個index.js 文件。愛掏網 - it200.com
- 接下來在命令行輸入
webpack --config ./webpack.config.js就可以輸出dist文件夾。愛掏網 - it200.com - 為了方便起見，通常我們會在package.json里配置腳本命令。愛掏網 - it200.com在scripts標簽下，添加一句
"build": "webpack --config ./webpack.config.js"這樣，我們就可以通過npm run build完成webpack打包。愛掏網 - it200.com
配置開發應用服務器
正常情況下，我們需要以應用服務器打開我們的網頁，webpack-dev-server提供了一個簡單的web服務器，并且能夠實時重新加載。愛掏網 - it200.com指南 首先需要安裝webpack-dev-server npm install -D webpack-dev-server。愛掏網 - it200.com
接下來，修改配置文件，告訴開發服務器，在哪里尋找文件：
1 // webpack.config.js 2 module.exports = { 3 devServer: { 4 contentBase: './dist' 5 } 6 }
?
這段配置告訴webpack-dev-server，在默認host和port下建立服務，并將contentBase目錄下的目錄，作為可訪問文件。愛掏網 - it200.com
接下來讓我們的服務器跑起來，在package.json配置如下的命令腳本：
1 "scripts" : { 2 "start": "webpack-dev-server --mode development --open", 3 "build: "webpack --mode production --config ./webpack.config.js" 4 }
?
其中mode是上文中提到模式概念，webpack會有相應的內置優化。愛掏網 - it200.com
Babel & React
ES6已經極為流行了，不過目前仍有瀏覽器不兼容。愛掏網 - it200.com同時react的jsx語法，也需要babel來將其轉化為能兼容的js代碼。愛掏網 - it200.com
1 npm install react react-dom react-router-dom -S 2 npm install babel-core babel-loader babel-preset-env babel-preset-react -D
?
安裝完之后，我們需要在webpack中配置使其生效。愛掏網 - it200.com在webpack.config.js 的module中添加rules規則，如下：
module.exports = { // ...省略 module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, enforce: 'pre', use: [{ loader: 'babel-loader', }, { loader: 'eslint-loader', // 指定啟用eslint-loader options: { formatter: require('eslint-friendly-formatter'), emitWarning: false } }] }, ] }
?
使用babel-loader我們需要配置相應的規則，我們可以這樣配置： 
同時考慮到，后期可能會別的規則需求，例如使用antDesign的按需引入，我們將babel的配置提出來，在根目錄下新建文件 .babelrc，并書寫以下代碼。愛掏網 - it200.com
{
"presets": ["env","react"],
// antd按需引入
// "plugins": ["react-hot-loader/babel", ["import", { "libraryName": "antd", "libraryDirectory": "es","style": "css" }], "transform-runtime"]
}
?
到這里，我們就完成babel的相關配置，并且安裝了react相關依賴，可以書寫jsx語法了。愛掏網 - it200.com
關于樣式
前置安裝less-loader/scss-loader、style-loader、css-loader、postcss-loader。愛掏網 - it200.com
- less-loader是將less編譯成css的loader
- postcss是將css加上瀏覽器Hack的loader
- css-loader用于在js中import、require等方法引入css
- style-loader用于將css最終寫入html文件。愛掏網 - it200.com
test: /\.(css|less)$/, exclude: /node_modules/, include: /src/, use: [ {loader: "style-loader"}, { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', importLoaders: 2, localIdentName: '[name]-[local]-[hash:base64:5]', modules:true } }, { loader: 'postcss-loader', options: { // 如果沒有options這個選項將會報錯 No PostCSS Config found plugins: (loader) => [ require('autoprefixer')(), //CSS瀏覽器兼容 ] } },{ loader: 'less-loader', options: { javascriptEnabled: true, } }],
?
其中test對應的可以匹配的正則文件，include是需要編譯的目錄，exclude是跳過的目錄，use里面可以書寫跟loader相關的配置。愛掏網 - it200.com
注意loader相關的順序，特別是使用ExtractTextWebpackPlugin將css文件單獨打包的時候，應注意從右往左的順序
至此，完成了一個簡單的react工程的配置。愛掏網 - it200.com只包含有js和css相關的內容。愛掏網 - it200.com
工程優化
關于單頁面工程的優化，有很多方向和方法。愛掏網 - it200.com不管是生成環境構建還是懶加載，亦或是構建性能。愛掏網 - it200.com通過環境變量來實現不同的配置和打包策略。愛掏網 - it200.com根據工程的需求和復雜度不同，會有不同的解決方案，而隨著現在頁面越來越復雜，各個組件又經常變動。愛掏網 - it200.com暫時還沒有真正的完美的解決方案。愛掏網 - it200.com
在這里，我只能做一些常規性的優化。愛掏網 - it200.com
ExtractTextWebapckPlugin
在上面的配置中，我們沒有單獨打包樣式文件，樣式文件會被打包在js里面。愛掏網 - it200.com現在通過ExtractTextWebpackPlugin單獨打包樣式文件。愛掏網 - it200.comnpm install -D extract-text-webapck-plugin引入依賴，配置如下：
// module-> rules { test: /\.less$/, exclude: /node_modules/, include: /src/, // loader:['style-loader','css-loader'] use: ExtractTextWebapckPlugin.extract({ fallback:'style-loader', use: [ { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', importLoaders: 2, localIdentName: '[name]-[local]-[hash:base64:5]', modules:true } }, { loader: 'postcss-loader', options: { // 如果沒有options這個選項將會報錯 No PostCSS Config found plugins: (loader) => [ require('autoprefixer')(), //CSS瀏覽器兼容 ] } },{ loader: 'less-loader', options: { javascriptEnabled: true, } }], } ) }, // plugins 下新增 new ExtractTextWebapckPlugin({ filename: 'css/[name]-[hash].css', // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, allChunks: true }),
?
為打包后的文件增加hash
如果瀏覽器加載發現遠端文件沒有發生變化時，將會啟用緩存，導致新修改的頁面并沒有同步，這時候為了避免緩存，我們就需要讓每次打包后的文件有不同的文件名，以減少緩存。愛掏網 - it200.com
// webpack.config.js -> output output: { path: path.join(__dirname, "dist"), publicPath: '/', filename: "js/[name]-[hash]" + ".js", chunkFilename: "js/[name]-[hash]" + ".js", },
?
打包靜態文件
當頁面圖片較多時，會發送很多http請求，降低頁面性能。愛掏網 - it200.comurl-loader引入圖片編碼，生成dataURI，把圖片翻譯成一串字符串。愛掏網 - it200.com再把字符串打包到文件中，最終只需要引入文件就可以訪問圖片了。愛掏網 - it200.com但是當圖片較大時，編碼會消耗性能。愛掏網 - it200.com因此url-loader提供了一個limit參數，小于limit的文件會被轉為dataURI，大于limit會使用file-loader傳入。愛掏網 - it200.com首先引入依賴npm install -D file-loader url-loader，配置如下：
// module->rules { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[hash:7].[ext]' } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/fonts/[name].[hash:7].[ext]' } },
?
html-webpack-plugin
這是一個 webpack 插件，為我們在生成有 hash 標識符的 css,js時非常方便，它需要我們指定一個模板，然后它會生成一個自動引入我們生成的文件的新模板。愛掏網 - it200.com
首先安裝依賴npm install -D html-webpack-plugin ，webpack配置如下：
const HtmlWebPackPlugin = require('html-webpack-plugin')
// plugins下添加
new HtmlWebPackPlugin({
template: './src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
filename: 'index.html'
}),
?
devServer
開發服務器配置如下：
// webpack.config.js devServer: { // contentBase: path.join(__dirname, ""), contentBase: false, //since we use CopyWebpackPlugin. clientLogLevel: 'warning', publicPath: '/', hot: true, progress: true, overlay: { warnings: false, errors: true }, historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join('/', 'index.html') }, ], }, // historyApiFallback: true, // quiet: true, // necessary for FriendlyErrorsPlugin compress: true, inline: true, port: 8083, host: '127.0.0.1', watchOptions: { poll: false, } },
?
因為配置了contentBase = false，所以使用CopyWebpackPlugin，還是先安裝依賴npm install -D copy-webpack-plugin，然后代碼如下：
// plugins // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, './src/static'), to: 'static', ignore: ['.*'] } ]),
?
提取公共代碼
利用webpack4的splitChunks來分割代碼，配置如下：
// webpack.config.js //4.0配置 optimization: { /*splitChunks: { chunks: 'all',//"initial" | "async" | "all" cacheGroups: { default: false, vendors: false, }, },*/ /*splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: "vendor", chunks: "all" } } }*/ runtimeChunk: { name: "manifest" }, splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: "vendor", chunks: "all" } } } },
?