github

1、創建基本目錄結構

• 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] }

2、搭建react開發環境

2.1、react配置

• 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"] }

2.2 配置sass-loader, css-loader以及其他loader：

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']}]}, }

2.3 配置eslint、stylelint

配置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中添加就行了。

3、按需引入antd

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開發環境就搭建好了。

總結

以上是生活随笔為你收集整理的React实践（一）——webpack4搭建开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。