從零開始搭建React應用（一）——基礎搭建

Mello_Z發表於2018-05-12
React

專案連結：github.com/MrZhang123/…

核心

  • React:16.3.2
  • React-dom:16.3.2
  • Webpack:4.6.0
  • React-router-dom:4.2.2
  • Redux:4.0.0
  • React-hot-loader:4.1.2

目錄結構

├── README.md
├── build
│   ├── webpack.base.config.js
│   ├── webpack.dev.config.js
│   └── webpack.production.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── App.js
│   ├── components
│   │   └── Loading
│   │       └── index.js
│   ├── index.html
│   ├── main.js
│   ├── redux
│   │   ├── actions
│   │   │   └── demo.js
│   │   ├── middleware
│   │   │   └── index.js
│   │   ├── reducers
│   │   │   ├── demo.js
│   │   │   └── index.js
│   │   └── store
│   │       └── index.js
│   ├── static
│   │   └── css
│   │       └── normalize.css
│   ├── styles.scss
│   └── views
│       ├── Content
│       │   ├── About
│       │   │   └── index.js
│       │   ├── Home
│       │   │   └── index.js
│       │   ├── Topics
│       │   │   └── index.js
│       │   └── router.js
│       └── RouterLink
│           └── index.js
└── yarn.lock
複製程式碼

基礎搭建

首先搭建一個基礎的React開發環境，沒有redux和react-router

安裝必須的包

# dependencies
yarn add react react-dom

# devDependencies
yarn add --dev webpack webpack-cli webpack-dev-server babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env css-loader file-loader jsx-loader style-loader url-loader
複製程式碼

說明

  1. webpack4的cli(command line interface)已經移動到webpack-cli了，如果要使用CLI,你需要安裝webpack-cli，具體使用可以檢視webpack-cli的文件。
  2. 由於Babel預設只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全域性物件，以及一些定義在全域性物件上的方法（比如Object.assign），所以如果想使用這些方法就必須使用babel-polyfill，為當前環境提供一個墊片。

配置webpack

在build資料夾下新建三個檔案——webpack.base.config.js, webpack.dev.config.js, webpack.production.config.js，將dev和produciton裡公共的部分放在base檔案中。

// webpack.base.config.js
const path = require('path')

module.exports = {
  entry: {
    main: [
      'babel-polyfill',
      path.resolve(__dirname, '../src/main.js')
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: 'chunk/[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.web.js', '.js', '.jsx', '.json']
  },
  mode: '' // webpack v4 add
}
複製程式碼

由於是webpack的公共配置檔案，所以這裡mode設定空，之後在dev和prodctuon中再分別設定。

webpack4的mode

在webpack v4中新增一些預設配置，通過設定mode是development和production（預設）來啟用在開發環境和生產環境的預設配置。

1.二者都有的配置

//parent chunk中解決了的chunk會被刪除
optimization.removeAvailableModules:true
//刪除空的chunks
optimization.removeEmptyChunks:true
//合併重複的chunk
optimization.mergeDuplicateChunks:true
複製程式碼

2.development的預設配置

//除錯
devtool:eval
//快取模組, 避免在未更改時重建它們。
cache:true
//快取已解決的依賴項, 避免重新解析它們。
module.unsafeCache:true
//在 bundle 中引入「所包含模組資訊」的相關注釋
output.pathinfo:true
//在可能的情況下確定每個模組的匯出,被用於其他優化或程式碼生成。
optimization.providedExports:true
//找到chunk中共享的模組,取出來生成單獨的chunk
optimization.splitChunks:true
//為 webpack 執行時程式碼建立單獨的chunk
optimization.runtimeChunk:true
//編譯錯誤時不寫入到輸出
optimization.noEmitOnErrors:true
//給模組有意義的名稱代替ids
optimization.namedModules:true
//給模chunk有意義的名稱代替ids
optimization.namedChunks:true
複製程式碼

3.production的預設設定

//效能相關配置
performance:{hints:"error"....}
//某些chunk的子chunk以一種方式被確定和標記,這些子chunks在載入更大的塊時不必載入
optimization.flagIncludedChunks:true
//給經常使用的ids更短的值
optimization.occurrenceOrder:true
//確定每個模組下被使用的匯出
optimization.usedExports:true
//識別package.json or rules sideEffects 標誌
optimization.sideEffects:true
//嘗試查詢模組圖中可以安全連線到單個模組中的段。- -
optimization.concatenateModules:true
//使用uglify-js壓縮程式碼
optimization.minimize:true
複製程式碼

配置webpack.dev.config.js

const webpack = require('webpack')
const config = require('./webpack.base.config.js')
const WebpackDevServer = require('webpack-dev-server')
const PORT = process.env.PORT || 8000 // 預設8000埠，可以通過package.json配置

config.entry.main = (config.entry.main || []).concat([
  `webpack-dev-server/client?http://localhost:${PORT}/`,
  'webpack/hot/dev-server'
])

config.plugins = (config.plugins || []).concat([
  new webpack.HotModuleReplacementPlugin()
])

config.mode = 'development'

const compiler = webpack(config)

const server = new WebpackDevServer(compiler, {
  hot: true, // 開啟wbepack HMR
  quiet: true,
  historyApiFallback: true,
  filename: config.output.filename,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
})

server.listen(PORT, 'localhost', () => {
  console.log(`server started at localhost:${PORT}`)
})
複製程式碼

關於output.publicPath和devServer.publicPath的區別可以參考我的文章：Webpack中publicPath詳解

配置webpack.production.config.js

const path = require('path')
const webpack = require('webpack')
const config = require('./webpack.base.config')
const CleanWebpackPlugin = require('clean-webpack-plugin')

config.mode = 'production'

config.plugins = (config.plugins || []).concat([
	new CleanWebpackPlugin(['dist'], {
    root: path.resolve(__dirname, '../')
  }),
  new webpack.HashedModuleIdsPlugin()
])

module.exports = config
複製程式碼

結語

至此，一個簡單的React開發環境就搭建完成，但是在使用後會發現一些問題，比如webpack將js和css打包在一起，我們在使用webpack的HMR時候，只要儲存，頁面就會重新整理，頁面的狀態會重置等問題以及加入常用的redux和react-router，下一篇——從零開始搭建React應用（二）——React應用架構將就這些問題作出解決。

相關文章