本篇文章主要的講述了關於react webpack的開發環境配置步驟的深入了解，現在我們來一起閱讀本篇文章吧
這裡先講每一步的原因和做法，其他文章會講怎麼快速搭建webpack，不用這麼繁瑣。設定基礎文章連結：http://www.php.cn/js-tutorial-409770.html
轉接上文目錄：
##目錄
二、webpack 升級篇
6. ES6 轉ES5模組
7.url與file模組
三、webpack 進階篇
1.語法檢視器eslint
2.uglify 原始碼加密壓縮
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll
6.ES6 轉ES5模組
#由於部分瀏覽器對ES6的部分語法沒有完全相容，但nodejs已經支援ES6，所以webpack提供了ES6轉ES5 的模組。
安裝指令（在開發模式使用）：
npm install babel-loader babel-core babel-preset-env webpack --save-dev
登入後複製
如果要支援react，需要安裝下面的模組：
npm install babel-preset-es2015 babel-preset-react babel-preset-stage-3 --save-dev
登入後複製
webpack.config.js 的程式碼：
module.exports = {...module:{
rules:[...
{
test:/\.jsx$/,
exclude:/(node_modules|bower_components)/,//排除XXX类型文件
use:{
loader:'babel-loader'
}
}
]
}...}登入後複製
在根路徑下建立.babelrc 檔案
{
"presets": ["es2015","react"]}登入後複製
7.url和file模組
引入url模組處理圖片，file模組處理圖片外的其他檔案類型
指令：
npm install url-loader file-loader --save-dev
登入後複製
webpack.config.js 程式碼：
module.exports = {...
{ //配置辅助loader,处理图片
test:/\.(png|jpg|gif)$/,
loader:'url-loader',
options:{limit:8192,name:"images/[name].[ext]"}
},
{ //处理图片外的其他文件类型
test:/\.(appcache|svg|eot|ttf|woff|woff2|mp3|pdf)(\?|$)/,
include:path.resolve(__dirname,'src'),
loader:'file-loader?name=[name].[ext]'
}...}登入後複製
三、webpack 進階篇
1.語法檢查器eslint
ESLint是一個QA工具，用來避免低階錯誤和統一程式碼的風格。
安裝指令：
npm install eslint eslint-loader --save-dev
登入後複製
裝完eslint，然後透過init指令建立規則檔。
指令：
cd 进入项目文件夹根路径，敲./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
登入後複製
回答完問題後，在根目錄下面會產生一個.eslintrc.json格式的檔案,並自動安裝對應的套件。 .eslintrc.json
裡面的內容可以依照自己的程式設計習慣在微調。 ESLINT中文網站
這裡先給個範例：
{ "env": { "browser": true, "commonjs": true, "es6": true, "node": true
}, "extends": "plugin:react/recommended", "parserOptions": { "ecmaVersion": 8,//ECMAScript syntax 最新版本
"ecmaFeatures": { "impliedStrict": true, "experimentalObjectRestSpread": true, "jsx": true
}, "sourceType": "module"
}, "plugins": [ "react"
], "rules": { "semi": [ "error", "always"
],
"no-debugger": "error",//不允许用debugger这个关键字
"no-dupe-args": "error",//不允许函数参数同名
"no-caller": "error",//不允许用callee等，es6严格模式不支持
"no-unmodified-loop-condition": "error", "no-with": "error",//不允许用with来声明
"no-catch-shadow": "error"
}
}登入後複製
webpack.config.js 的設定
module: {
rules: [ ...{
test:/\.js$/,
enforce:'pre',
loader:'eslint-loader',
include:path.resolve(__dirname,'src')
}...]
}登入後複製
2.uglify 原始碼加密壓縮（想看更多就到PHP中文網
React參考手冊欄位中學習）
屬於webpack的插件，直接使用就行。
webpack.config.js 代码：
module.exports = { ...
plugins:[
..
new webpack.optimize.UglifyJsPlugin(
{output: {
comments:false,//删除代码中所有注释
},
compress:{
warnings:false,
}
})
]...}登入後複製
4.devtool
webpack 提供的輔助工具，調試的時候能正確的顯示原始碼出錯的行數。 eval-soure-map用於開發模式下。其他參數使用環境
module.exports = {...devtool:'eval-soure-map'...}登入後複製
5.happypack
讓loader多進程去處理文件，加速webpack建置
安装指令：npm install happypack --save-dev
登入後複製
var os = require('os');//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().lengthvar Happypack = require('happypack');var happypackThreadPool = Happypack.ThreadPool({size:4});//size:os.cpus().Lengt根据电脑的idle，配置当前最大的线程数量module.config.js 下面的配置module.exports = {
...module:{ rules:[
{ test:/\.js$/,
include:path.resolve(__dirname), loader:'happypack/loader?id=happybabel'
}
]
}plugins:[new Happypack({ id:"happybabel", loaders:['babel-loader'], threadPool:happypackThreadPool, cache:true, verbose:true}),
]
}登入後複製
6.dll
在根目錄上建立一個webpack.dll .config.js檔案
//webpack.dll.config.js 的内容：const webpack = require('webpack');const path = require("path");const fs=require('fs');const vendors = [ 'react' //这里添加第三方库文件
];module.exports = { entry: { vendor: vendors,
}, output: { path: path.join(__dirname+'/build'), filename: '[name].[chunkhash].js', library: '[name]_[chunkhash]',
}, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname+"/build"+'/manifest.json'), name: '[name]_[chunkhash]', context: __dirname,
}),
],
};//console.log(path.join(__dirname+"/build"));登入後複製
在Powershell視窗裡面敲下方指令：
webpack --config webpack.dll.config.js -p
登入後複製
在build路徑下會產生兩個文件，一個manifest.json,另一個叫vendor.XXXX.js的文件。 vendor.xxx.js 需要在html（這裡直接寫在html模板裡面）裡面引入。
webpack.config.js 填加:
moule.exports = { ...
plugins:[ ...
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./build/manifest.json'),
}), ...]
....
}登入後複製
然後在Powershell 裡面敲npm start 就好。
這篇文章到這就結束了（想看更多就到PHP中文網
React使用手冊欄位中學習），有問題的可以在下方留言提問。
以上是react如何配置開發環境？ React+webpack 的開發環境設定步驟（深入篇）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
