摘要：按需引入在入口文件中引入全局的如果僅僅是這樣的話，我們加載組件是全部加載的，這時候我們要在的中配置這樣之后就可以按照的官網來使用里的組件了。啦，這樣一個簡單的開發環境就搭建好了。

github

npm init

創建src文件夾，再其中新建index.html

安裝webpack依賴:
npm install webpack webpack-cli webpack-dev-server --save-dev

配置webpack,根目錄下新建webpack.config.js:

module.exports = {
    mode: "development"    // 生產環境為"production"
}

配置命令行:

// package.json
{
    ...
    "script": {
        ...
        "start": "webpack-dev-serve --hot"    
    }
}

利用html-webpack-plugin插件配置自動生成頁面和注入打包后的js
npm install html-webpack-plugin --save-dev
webpack.config.js中配置:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

// 創建插件示例對象
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),
    filename: "index.html"
})
module.exports = {
    mode: "development",
    plugins: [
        htmlPlugin
    ]
}

npm install react react-dom --save

使用babel轉譯jsx語法(一定要注意版本)：
npm install babel-core babel-loader@7 babel-plugin-transform-runtime --save-dev
npm install babel-preset-env babel-preset-stage-0 babel-preset-react --save-dev

配置babel

// webpack.config.js
module.exports = {
    ...
    modules: {
        rules: [
            { test: /.js|jsx$/, use: "babel-loader", exclude: /node_modules/ } // 一定要添加exclude排除項
        ]
    },
    resolve: {
        extensions: ["js", "jsx", "json"] // 配置導入模塊的后綴名忽略
        alias: {
            "@": path.join(__dirname, "/src") // 配置src路徑標識符
        }
    }
}

根目錄新建 .babelrc

{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}

cnpm install style-loader css-loader --save-dev
cnpm install sass-loader node-sass -save-dev
cnpm install url-loader file-loader --save-dev

注意在css-loader之后是可以加參數的，格式類似url的query格式：

modules: 開啟模塊化（只針對類名和id，標簽選擇器依然是全局）

localIdentName:
2.1 [path]: 相對于src的路徑
2.2 [name]: 樣式文件名
2.3 [local]: 樣式原名
2.4 [hash:8]: 哈希值，8位限制長度

這里我們需要注意的是，我們有可能會用到第三方的樣式表，而這時候如果是針對.css文件進行模塊化的化，那就用不了了。所以，自己寫的樣式用sass,進行模塊化處理，而全局或者第三方樣式表用css。

// webpack.config.js
{
    ...
    modules: {
        rules: [
             // 一定要添加exclude排除項
            { test: /.js|jsx$/, use: "babel-loader", exclude: /node_modules/ },
            { test: /.css$/, use: ["style-loader", "css-loader"]}, 
            // 字體文件打包處理配置
            { test: /.ttf|woff|woff2|eot|svg$/, use: "url-loader"},
            // 打包處理scss并模塊化（只針對類名或id，標簽選擇器不會模塊化)
            { test: /.scss$/, use: ["style-loader", "css-loader?modules&localIdentName=[local]-[hash:8]", "sass-loader"]}
      
        ]
    },
}

配置eslint

cnpm install eslint eslint-loader --save-dev

項目根目錄新建.eslintrc.js：

module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        // 允許開發環境使用debugger
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        //禁止使用var
        "no-var": 2,
        // 強制操作符周圍有空格
        "space-infix-ops": 2,
        // 語句塊之前的空格(大括號之前有空格)
        "space-before-blocks": [2, "always"],
        // 強制在花括號中使用一致的空格
        "object-curly-spacing": [2, "always"],
        // 逗號之后必須有空格
        "comma-spacing": [2, { "before": false, "after": true }],
        // 對象字面量的鍵值之間的冒號后只有一個空格
        "key-spacing": [2, {"mode": "strict"}],
        // 約定以駝峰法命名
        "camelcase": [2, {"properties": "always"}]
    }
}   

rules里的規則可與eslint官網自由配置，也可以用第三方配置好的插件。
webpack.config.js中的loader中配置：

    { enforce: "pre", test: /.js|jsx$/, use: "eslint-loader", exclude: /node_modules/ },

配置stylelint

cnpm install stylelint stylelint-webpack-plugin --save-dev
項目根目錄新建stylelint.config.js

module.exports = {
    defaultServerity: "warning",
    rules: {
        // 禁止使用important
        "declaration-no-important": true,
        // 選擇器后的大括號前必須有一個空格
        "block-opening-brace-space-before": "always",
        // url需要加引號
        "function-url-quotes": "always",
        // 禁止空塊
        "block-no-empty": true,
        // 取消小于1的小數的前導0
        "number-leading-zero": "never",
        // 禁止小數后的尾隨0
        "number-no-trailing-zeros": true,
        // 函數逗號之后必須跟空格
        "function-comma-space-after": "always",
        // 函數逗號前不能加空格
        "function-comma-space-before": "never",
        // 聲明的冒號后必須跟空格
        "declaration-colon-space-after": "always",
        // 聲明的冒號前禁止空格
        "declaration-colon-space-before": "never",
        // 規定css類名格式(此處為短橫線命名法，例如：.m-title)
        "selector-class-pattern": "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"
    }
}

同樣的道理，規則可以去stylelint官網配置。
webpack.config.js配置:

const StylelintWebpackPlugin = require("stylelint-webpack-plugin")

// 創建stylelint插件示例對象
const stylelintPlugin = new StylelintWebpackPlugin({
    files: ["src/**/*.s?(a|c)ss"]
})

再在plugin中添加就行了。

cnpm install antd --save
cnpm install babel-plugin-import --save-dev

在入口文件中引入全局的css:

import "antd/dist/antd.css"

如果僅僅是這樣的話，我們加載react組件是全部加載的，這時候我們要在.babelrc的plugins中配置：

plugins: [["import", { "libraryName": "antd", "style": "css" }]]

這樣之后就可以按照antd的官網來使用antd里的組件了。

OK啦，這樣一個簡單的react開發環境就搭建好了。