當下前端最火的兩個框架就是了 React 和 Vue 了，Facebook 官方推出的 create-react-app ，Vue 也有自己的 CLI 工具Vue-CLI，兩個工具都已經非常好用，但在實際專案中，我們仍然需要做一些修改才可以滿足實際專案上線的需求，同時我們仍希望有更多所謂個性化設定來支援專案。所以掌握 Webpack 中 React 和 Vue 的配置還是很有必要的事情。
配置React開發環境
1、React專案基礎配置
建立專案目錄，比較在本地建立一個 myapp 的資料夾，依次執行初始化、安裝React、安裝Webpack和Babel等操作，具體執行命令如下：
# 新建目錄，並且進入
mkdir react-webpack && cd $_
# 建立 package.json
npm init -y
# 安裝 react react-dom依賴
npm i react react-dom
# 安裝 webpack 和 webpack-cli 開發依賴
npm i webpack webpack-cli -D
# 安裝 babel
npm i babel-loader @babel/core @babel/preset-env -D
# 安裝 babel preset-react
npm i @babel/preset-react -D
複製程式碼還需要新增支援jsx檔案的Babel，新建 webpack.config.js 的配置檔案，內容如下：
module.exports = {
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/, // jsx/js檔案的正則
exclude: /node_modules/, // 排除 node_modules 資料夾
use: {
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 轉義的配置選項
babelrc: false,
presets: [
// 新增 preset-react
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), {modules: false}]
],
cacheDirectory: true
}
}
}
]
}
};
複製程式碼在專案的根目錄下建立src目錄，在src下分別建立以下檔案：
App.js檔案：
// App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello React and Webpack</h1>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('app'));
複製程式碼index.js檔案：
// index.jsx
import App from './App'; // 這裡可以省略.jsx
複製程式碼在 webpack.config.js 中新增 entry：
module.exports = {
entry: './src/index.jsx'
// ...
};
複製程式碼接下來在專案根目錄下建立 public 目錄，用於存放靜態資原始檔，新建 index.html 檔案，作為專案的模板，內容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Hello React Webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製程式碼我們需要使用 html-webpack-plugin 外掛來複制 index.html 到 dist 資料夾下，首先是安裝 html-webpack-plugin ：
cnpm i html-webpack-plugin -D
複製程式碼修改 webpack.config.js：
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebPackPlugin({
template: 'src/index.html',
filename: 'index.html'
})
]
};
複製程式碼在 scripts 中配置打包命令：
{
"scripts": {
"build": "webpack --mode production"
}
}
複製程式碼2、React本地服務配置
首先使用webpack-dev-server搭建一個本地開發服務，安裝webpack-dev-server依賴：
npm i webpack-dev-server -D
複製程式碼在package.json增加start的命令：
{
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
}
}
複製程式碼為了方便開發，我們將新建了一個webpack.config.dev.js的配置檔案：
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
contentBase: path.join(__dirname, './src/'),
publicPath: '/',
host: '127.0.0.1',
port: 3000,
stats: {
colors: true
}
},
entry: './src/index.jsx',
// 將 jsx 新增到預設副檔名中，省略 jsx
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/, // jsx檔案的正則
exclude: /node_modules/, // 排除 node_modules 資料夾
use: {
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 轉義的配置選項
babelrc: false,
presets: [
// 新增 preset-react
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), {modules: false}]
],
cacheDirectory: true
}
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: 'src/index.html',
filename: 'index.html',
inject: true
})
]
};
複製程式碼對應的package.json的scripts也修改下，start 新增 config 檔案路徑：
{
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --config './webpack.config.dev.js' --open "
}
}
複製程式碼到這裡，可以執行下npm start看下效果了！
配置Vue的開發環境
上面 React 部分已經詳細講解了一些重複的步驟，這裡就簡單說下操作步驟和程式碼。
首先也是建立目錄、初始化 package.json、安裝 Vue、安裝 Webpack 和安裝 Babel。
# 新建目錄，並且進入
mkdir vue-webpack && cd $_
# 建立 package.json
npm init -y
# 安裝 vue 依賴
npm i vue
# 安裝 webpack 和 webpack-cli 開發依賴
npm i webpack webpack-cli -D
# 安裝 babel
npm i babel-loader @babel/core @babel/preset-env -D
# 安裝 loader
npm i vue-loader vue-template-compiler -D
# 安裝 html-webpack-plugin
npm i html-webpack-plugin -D
複製程式碼然後在 src 資料夾下新建App.vue和index.js兩個檔案，內容如下：
// app.js
import Vue from 'vue';
import App from './app.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount('#app');
複製程式碼<template>
<div id="app">
Hello Vue & Webpack
</div>
</template>
<script>
export default {};
</script>
複製程式碼然後建立一個 HTML 檔案index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Webpack Vue Demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製程式碼最後配置webpack.config.js，內容如下：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
]
};
複製程式碼Vue 的配置檔案跟 React 最大區別是，React 是直接擴充套件了 Babel 的語法，而 Vue 語法的模板還需要使用vue-loader來處理。
完成上面配置後，執行下npx webpack看下 dist 產出吧。開發相關的配置跟 React 部分基本一致，這裡不再重複介紹了。