使用 webpack 搭建 React 項(xiàng)目

簡(jiǎn)評(píng)：相信很多開發(fā)者在入門 react 的時(shí)候都是使用 create-react-app 或 react-slingshot 這些腳手架來快速創(chuàng)建應(yīng)用，當(dāng)有特殊需求，需要修改 eject 出來的 webpack 配置文件時(shí)，面對(duì)各種配置項(xiàng)不知如何下手，本文會(huì)介紹如何使用 webpack 手動(dòng)搭建一個(gè) react 項(xiàng)目。

新建工程

  1. 先新建一個(gè) demo 項(xiàng)目，項(xiàng)目目錄結(jié)構(gòu)為：

2. 在工程根目錄新建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My React Boilerplate</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3. 安裝 react react-dom 依賴：

npm i react react-dom

4. 創(chuàng)建應(yīng)用 /src/components/App.js

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to My Starter App</h1>
      </div>
    )
  }
}

export default App

5. 創(chuàng)建 /src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

import './styles/style.sass'

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

以上就是我們的 demo 工程。如果我們通過 react-create-app 上面的代碼已經(jīng)可以正常運(yùn)行了，但是現(xiàn)在的代碼沒有進(jìn)行任何的處理無法直接在瀏覽器中運(yùn)行。

我們需要將 jsx 和 ES6 代碼轉(zhuǎn)換成瀏覽器中可運(yùn)行的代碼。

Babel

Babel 就是為了處理上面的問題，我們可以使用 JavaScript 最新的語法特性，然后使用 babel 插件對(duì)代碼進(jìn)行轉(zhuǎn)換以達(dá)到最大的兼容性。首先安裝相關(guān)依賴：

npm i babel-cli babel-core babel-preset-env babel-preset-react babel-preset-stage-2--save-dev

然后在工程跟目錄創(chuàng)建一個(gè) .babelrc 配置文件，內(nèi)容為：

{
    "presets": ["env", "react", "stage-2"]
}

參數(shù)說明：

  • env：表示包含 babel-preset-es2015,babel-preset-es2016和babel-preset-es2017，意味著我們可以編寫 ES6，ES7，和 ES8 的代碼。
  • react：這個(gè)選項(xiàng)指明處理 React 的相關(guān)不能，不如 JSX。
  • stage-2：運(yùn)行我們使用當(dāng)前處于階段 2 或更高階段的 javascript 功能更多信息可以參考 TC39。

測(cè)試

剛才已經(jīng)創(chuàng)建了 App.js 的 React 組件，并且安裝配置了 babel，為了代碼的健壯性我們?cè)偬砑訙y(cè)試環(huán)境這里使用 Jest 和 Enzyme。

  1. 安裝依賴：
npm i jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev

2. 然后創(chuàng)建 /test/enzyme.setup.js 文件，添加如下代碼：

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({
    adapter: new Adapter()
})

3. 在 package.json 中添加 jest 功能字段：

{
...,
"jest": {
    "setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
  },
...
}

4. 編寫測(cè)試代碼：

創(chuàng)建 /test/App.test.js 文件，為 App 組件編寫測(cè)試代碼：

import App from '../src/components/App'
import React from 'react'
import { shallow } from 'enzyme'

describe('App', () => {
  test('should match snapshot', () => {
    const wrapper = shallow(<App />)

    expect(wrapper.find('h1').text()).toBe('Welcome to My Starter App')
    expect(wrapper).toMatchSnapshot
  })
})

當(dāng)執(zhí)行 jest ./test 來啟動(dòng)測(cè)試代碼。

為了方便可以將他添加到 package.json 中：

{
  ...,
  "scripts": {
    "test": "jest ./test"
  }
}

Webpack

webpack 可以將我們工程代碼打包到一個(gè)文件中，比如我們有很多個(gè) js 代碼相互依賴，打包的時(shí)候會(huì)將這些 js 文件合并成一個(gè)文件，還可以使用插件來預(yù)處理和處理最終生成的代碼。

  1. 安裝 webpack 依賴：
npm i webpack --save-dev

webpack 運(yùn)行的時(shí)候回自動(dòng)找到項(xiàng)目根目錄的 webpack.config.js 文件，所以我們可以先創(chuàng)建這個(gè)文件，并加入如下代碼。

const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  }
}

entry 指明入口文件，webpack 會(huì)從這個(gè)文件開始連接所有的依賴。 output 指明打包后的文件存放的位置。

Webpack loaders

loaders 可以讓 webpack 處理很多不同格式的文件（例如:圖片、CSS 、 JSX ...），

這里我們沒有用到圖片和 CSS 資源，只需要處理 ES6 和 JSX，只需要 babel-loader。

  1. 安裝 babel-loader:
npm i babel-loader --save-dev

然后在 webpack.config.js 文件中添加打包規(guī)則添加后代碼如下：

const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }],
      }
    ]
}

2. 如果需要使用 Sass 和 SCSS，我們需要其他的 loader。

npm i node-sass sass-loader style-loader css-loader --save-dev

然后在 webpack.config.js 中添加 sass 和 scss 文件的轉(zhuǎn)換規(guī)則，最終代碼如下：

const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }],
       }
    ]
}

現(xiàn)在可以在工程中使用 Sass 了，創(chuàng)建 /src/styles/style.sass 文件，并添加如下代碼：

body
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
  color: white
  background: black

然后在 index.js 帶人 style.sass:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

import './styles/style.sass'

ReactDOM.render(
  <App />,
  document.getElementById('app')

3. 現(xiàn)在有一個(gè)需求，我們需要將打包后的 js 文件自動(dòng)導(dǎo)入到 html 文件中，我們可以使用 html-webpack-plugin 自動(dòng)完成這部分內(nèi)容。

安裝 html-webpack-plugin：

npm i html-webpack-plugin --save-dev

然后在 webpack.config.js 中導(dǎo)入這個(gè)插件：

const CleanWebpackPlugin = require('clean-webpack-plugin')
const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: 'index.html'
    })
  ]
}

當(dāng)每次 build 的時(shí)候的時(shí)候會(huì)在 dist 目錄中生成打包后的文件，我們需要打包時(shí)清除這些內(nèi)容可以使用 clean-webpack-plugin 插件：

npm i clean-webpack-plugin --save-dev

在 webpack.config.js 中添加 clean-webpack-plugin:

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: 'index.html'
    }),
    new CleanWebpackPlugin(['dist']),
  ]
}

所有的 plugin 和 loader 已經(jīng)加載完了，為了方便我們開發(fā)，還需要 webpack 開發(fā)服務(wù)器，這樣我們就可以實(shí)時(shí)查看代碼修改的效果了。

npm i webpack-cli webpack-dev-server --save-dev

在 webpack.config.js 中添加 devServer 字段:

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: 'index.html'
    }),
    new CleanWebpackPlugin(['dist']),
  ],
  devServer: {
    host: 'localhost',
    port: 3000,
    open: true
  }
}

為了方便運(yùn)行，可以將 webpack-dev-server 命令添加到 package.json 中：

{
  ...
  "scripts": {
    "start": "webpack-dev-server",
    "test": "jest ./test"
  },
}

現(xiàn)在只需要 npm start 就可以查看 demo 的運(yùn)行效果，到這里 react webpack 項(xiàng)目開發(fā)環(huán)境已經(jīng)算是搭建完成。

但是這個(gè)配置沒有對(duì)生產(chǎn)環(huán)境做區(qū)分，也就是說生產(chǎn)環(huán)境的代碼和開發(fā)環(huán)境代碼一樣，但實(shí)際開發(fā)中往往需要對(duì)生產(chǎn)環(huán)境代碼做優(yōu)化比如（壓縮 js代碼，修改變量名和方法名），在開發(fā)環(huán)境中為了編譯調(diào)試又不希望優(yōu)化這部分內(nèi)容。我們可以將兩種環(huán)境區(qū)分開來。

這個(gè)時(shí)候有可以用到這個(gè)插件 webpack-merge：

npm i webpack-merge --save-dev

現(xiàn)在我們可以將原來的 webpack 配置文件分離成三個(gè)文件，

webpack.common.js 存放公共配置項(xiàng)：

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve('./dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: ['node_modules'],
        use: [{ loader: 'babel-loader' }],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: 'index.html'
    }),
    new CleanWebpackPlugin(['dist']),
  ]
}

webpack.dev.js 在通用配置項(xiàng)基礎(chǔ)上添加開發(fā)環(huán)境配置項(xiàng)：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    host: 'localhost',
    port: 3000,
    open: true
  }
})

webpack.prod.js 在通用配置項(xiàng)基礎(chǔ)上中添加生成環(huán)境配置項(xiàng)：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
})

最后在 package.json 中添加生產(chǎn)環(huán)境打包腳本：

{
  ...
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.dev.js",
    "test": "jest ./test"
  },
}

原文鏈接：How to build your own React boilerplate
推薦閱讀：Level UP! 提升你的編程技能

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容