學習從零開始搭建React腳手架

寫在前面

準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，因此打算本身來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;步驟上都差很少

第一步，依賴總覽

完成到我如今半成品的過程當中，目前完成開發模式的相關操做，添加了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歡迎各位來串門喲！
這個項目還在不斷的完善中。