寫在前面
準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;步驟上都差不多
react和vue,angular一樣也有腳手架。這大大方便了我們的開發。react的腳手架是create-react-app。
腳手架下載
使用npm下載create-react-app運行如下命令：
npm install -g create-react-app
國內npm一般下載比較慢或者是常出現下載失敗的情況，我們可以指定下載的倉庫：
npm install -g create-react-app --registry https://registry.npm.taobao.org
或者直接設置npm的默認倉庫：
npm config set registry https://registry.npm.taobao.org
第一步，依賴總覽
完成到我現在半成品的過程中，目前完成開發模式的相關操作，添加了babel,less,antd按需加載的地步。總體的package.json情況如下：
{ "name": "myreact", "version": "1.0.0", "description": "test react", "main": "index.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1", "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development" }, "keywords": [ "test", "react" ], "author": "xxxx", "license": "ISC", "devDependencies": { "autoprefixer": "^9.1.2", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-import": "^1.8.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^1.0.0", "html-webpack-plugin": "^3.2.0", "less": "^3.8.1", "less-loader": "^4.1.0", "postcss-import": "^12.0.0", "postcss-loader": "^3.0.0", "react-hot-loader": "^4.3.4", "style-loader": "^0.22.1", "webpack": "^4.16.5", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.5" }, "dependencies": { "antd": "^3.8.2", "react": "^16.4.2", "react-dom": "^16.4.2", "react-router-dom": "^4.3.1" } }暫時做到這些依賴，需要指出的是，webpack4和以前的版本可能有差別（不一定，或許是我沒有注意到）如果需要在scrpit屬性中配置，使用cli的方式運行，就需要安裝webpack-cli，需要行內命令行的方式運行，就需要安裝webpack-command,當然，一起安裝應該也沒有什么問題。這里是和教程里面配置的不一樣的地方。
然后，webpack4需要指明模式production|development，所以我在dev中使用了--mode development這個參數。這也是教程中沒有提到的部分。
關于babel配置
babel的相關依賴，有babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0,這個是babel的相關依賴，等等，有人可能會看到babel-plugin-import沒有提到，這個模塊的用途是為了antd的按需加載的。可以看看詳細的babelrc文件：
{ "presets": [ "es2015", "react", "stage-0" ], "plugins": [ "react-hot-loader/babel", ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] }以上是babel的配置，preset的值就是那三個模塊，至于作用，es2015是為了處理es6語法的，react是為了處理jsx語法的，stage-0是為了支持新特性的。
至于插件的配置，react-hot-loader/babel是為了熱更新，不丟失狀態，這點教程中已經說到了。下邊的import這個，就是上邊提到的babel-plugin-import的配置，也是antd的按需加載，官方推薦的配置。
還需要提到一點，這里可能一些新特性還是支持不夠，比如async/await語法，可能需要再安裝babel-plugin-transform-runtime這個模塊，babelrc文件的plugins還需要配置"transform-runtime"這個插件進去，以支持新特性。
依賴相關的就說到這里。
webpack的配置
我這邊直接在根目錄下的config目錄創建了webpack.dev.config.js,具體的配置如下：
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { /*入口*/ entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')], /*輸出到dist文件夾，輸出文件名字為bundle.js*/ output: { path: path.join(__dirname, '../dist'), filename: 'bundle.js' }, devServer: { contentBase: path.join(__dirname, '../dist'), historyApiFallback: true }, module: { rules: [{ test: //.js[x]?$/, use: ['babel-loader?cacheDirectory=true'], include: path.join(__dirname, '../src') },{ test: //.css$/, use: ['style-loader','css-loader','postcss-loader'], }, { test: //.less$/, use:[ 'style-loader', {loader: 'css-loader',options:{importLoaders:1}}, 'less-loader'], }] }, plugins:[new HtmlWebpackPlugin({ title:'react測試', template:'./src/index.html', filename:'./dist/index.html' })], devtool: 'inline-source-map', resolve:{ alias: { "@":path.join(__dirname, '../src/') } }};這邊的配置就沒啥說的，基本上loader的配置，目前完成js(x)的處理，css/less的處理，和其他的常規cli配置，少了url-loader,file-loader，代碼分割這些功能。
完結
差不多配置就是這樣，很簡陋，功能也不齊全，需要完成的工作還有很多。不過自己動手，豐衣足食……
項目的github地址 diy-react-cli歡迎各位來串門喲！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
