簡評:相信很多開發者在入門 react 的時候都是使用 create-react-app 或 react-slingshot 這些腳手架來快速創建應用,當有特殊需求,需要修改 eject 出來的 webpack 配置文件時,面對各種配置項不知如何下手,本文會介紹如何使用 webpack 手動搭建一個 react 項目。
新建工程
1.先新建一個 demo 項目,項目目錄結構為:
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.創建應用 /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.創建 /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 上面的代碼已經可以正常運行了,但是現在的代碼沒有進行任何的處理無法直接在瀏覽器中運行。
我們需要將 jsx 和 ES6 代碼轉換成瀏覽器中可運行的代碼。
Babel
Babel 就是為了處理上面的問題,我們可以使用 JavaScript 最新的語法特性,然后使用 babel 插件對代碼進行轉換以達到最大的兼容性。首先安裝相關依賴:
npm i babel-cli babel-core babel-preset-env babel-preset-react babel-preset-stage-2--save-dev
然后在工程跟目錄創建一個 .babelrc 配置文件,內容為:
{
"presets": ["env", "react", "stage-2"]
}
參數說明:
- env:表示包含 babel-preset-es2015,babel-preset-es2016和babel-preset-es2017,意味着我們可以編寫 ES6,ES7,和 ES8 的代碼。
- react:這個選項指明處理 React 的相關不能,不如 JSX。
- stage-2:運行我們使用當前處於階段 2 或更高階段的 javascript 功能更多信息可以參考 TC39。
測試
剛才已經創建了 App.js 的 React 組件,並且安裝配置了 babel,為了代碼的健壯性我們再添加測試環境這里使用 Jest 和 Enzyme。
1.安裝依賴:
npm i jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev
2.然后創建 /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.編寫測試代碼:
創建 /test/App.test.js 文件,為 App 組件編寫測試代碼:
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
})
})
當執行 jest ./test 來啟動測試代碼。
為了方便可以將他添加到 package.json 中:
{
...,
"scripts": {
"test": "jest ./test"
}
}
Webpack
webpack 可以將我們工程代碼打包到一個文件中,比如我們有很多個 js 代碼相互依賴,打包的時候會將這些 js 文件合並成一個文件,還可以使用插件來預處理和處理最終生成的代碼。
1.安裝 webpack 依賴:
npm i webpack --save-dev
webpack 運行的時候回自動找到項目根目錄的 webpack.config.js 文件,所以我們可以先創建這個文件,並加入如下代碼。
const path = require('path')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist'),
}
}
entry 指明入口文件,webpack 會從這個文件開始連接所有的依賴。 output 指明打包后的文件存放的位置。
Webpack loaders
loaders 可以讓 webpack 處理很多不同格式的文件(例如:圖片、CSS 、 JSX ...),
這里我們沒有用到圖片和 CSS 資源,只需要處理 ES6 和 JSX,只需要 babel-loader。
1.安裝 babel-loader:
npm i babel-loader --save-dev
然后在 webpack.config.js 文件中添加打包規則添加后代碼如下:
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 文件的轉換規則,最終代碼如下:
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'
}],
}
]
}
現在可以在工程中使用 Sass 了,創建 /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.現在有一個需求,我們需要將打包后的 js 文件自動導入到 html 文件中,我們可以使用 html-webpack-plugin 自動完成這部分內容。
安裝 html-webpack-plugin:
npm i html-webpack-plugin --save-dev
然后在 webpack.config.js 中導入這個插件:
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'
})
]
}
當每次 build 的時候的時候會在 dist 目錄中生成打包后的文件,我們需要打包時清除這些內容可以使用 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 已經加載完了,為了方便我們開發,還需要 webpack 開發服務器,這樣我們就可以實時查看代碼修改的效果了。
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
}
}
為了方便運行,可以將 webpack-dev-server 命令添加到 package.json 中:
{
...
"scripts": {
"start": "webpack-dev-server",
"test": "jest ./test"
},
}
現在只需要 npm start 就可以查看 demo 的運行效果,到這里 react webpack 項目開發環境已經算是搭建完成。
但是這個配置沒有對生產環境做區分,也就是說生產環境的代碼和開發環境代碼一樣,但實際開發中往往需要對生產環境代碼做優化比如(壓縮 js代碼,修改變量名和方法名),在開發環境中為了編譯調試又不希望優化這部分內容。我們可以將兩種環境區分開來。
這個時候有可以用到這個插件 webpack-merge:
npm i webpack-merge --save-dev
現在我們可以將原來的 webpack 配置文件分離成三個文件,
webpack.common.js 存放公共配置項:
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 在通用配置項基礎上添加開發環境配置項:
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 在通用配置項基礎上中添加生成環境配置項:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
})
最后在 package.json 中添加生產環境打包腳本:
{
...
"scripts": {
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --config webpack.dev.js",
"test": "jest ./test"
},
}