環境主要依賴版本
- webpack@4.8.1
- webpack-cli@2.1.3
- webpack-dev-server@3.1.4
- react@16.3.2
- babel-core@6.26.3
- babel-preset-env@1.6.1
- bable-preset-react@6.24.1
webpack安裝及配置
1. 起步
新建專案目錄，初始化npm，新建開發源目錄
mkdir webpack-react && cd webpack-react
npm init -y
mkdir src
複製程式碼2.webpack-cli
webpack從4.x版本開始，需要同時安裝webpack，webpack-cli(此工具用於在命令列中執行webpack)。
npm install webpack webpack-cli --save-dev
複製程式碼3.wepback配置檔案
在專案根目錄新建webpack.config.js檔案，此檔案為webpack執行核心檔案。
webpack.config.js 基本配置
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口檔案
output: { // webpack打包後出口檔案
filename: 'app.js', // 打包後js檔名稱
path: path.resolve(__dirname, 'dist') // 打包後自動輸出目錄
}
}
複製程式碼package.json 檔案 scripts配置
"scripts": {
"build": "webpack"
}
複製程式碼此時在命令列執行npm run build，就能執行webpack了，webpack會自動去找專案根目錄裡的webpack.config.js檔案，執行打包。
npm run build
// webpack打包後的專案
├── dist
│ └── app.js // 打包後的app.js
├── package.json
├── src
│ └── index.js // 源目錄入口檔案
└── webpack.config.js
複製程式碼webpack.config.js module相關配置
webpack 視所有檔案都為模組，圖片，css檔案，字型等靜態資源都會打包進js檔案，所以會需要用到loader檔案，更多Loaders可以查詢網址，接下來我們安裝一些必要的Loader檔案。
npm install style-loader css-loader url-loader --save-dev
複製程式碼webpack.config.js加入module模組
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
}
}
複製程式碼引入loader後，就可以在你的src/index.js檔案import你想引入的css檔案或者其他靜態資源。
cd src && touch main.css
複製程式碼src/index.js 檔案引入css
import "./main.css";
複製程式碼webpack.config.js plugins配置
主要的js檔案和靜態檔案都能成功打包成一個js檔案後，我們需要把這個js檔案放到html檔案裡，webpack外掛***html-webpack-plugin***就是幹這個事兒的，它能自動生成一個html檔案並把我們打包好的js檔案放入html。
npm install html-webpack-plugin --save-dev
複製程式碼webpack.config.js 配置plugins
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入外掛
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
]
};
複製程式碼執行npm run build後，我們可以看到dist目錄多出一個index.html檔案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>name</title>
</head>
<body>
// 打包後的app.js已經被自動插入了html檔案
<script type="text/javascript" src="app.js"></script></body>
</html>
複製程式碼到這裡，webpack最簡單最基本的需求已經配置完畢。 此時專案結構為：
├── dist // 生產目錄
│ ├── app.js
│ └── index.html
├── package.json
├── src // 源目錄
│ ├── index.js
│ └── main.css
└── webpack.config.js
複製程式碼React 的webpack配置
安裝react
npm install react react-dom --save
複製程式碼安裝react，wepback轉換依賴
React元件由JSX組成，瀏覽器無法識別JSX，需要babel進行轉換。
- babel-croe 為babel核心檔案
- babel-preset-env 將ES6轉義成ES5
- babel-preset-react 將JSX轉義成js
- babel-loader webpack的babe轉換
npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev
複製程式碼.babelrc配置檔案
在專案根目錄下新建.babelrc檔案，此檔案為bable核心配置，babel會自動在專案根目錄下識別。
// .babelrc
{
"presets": ["env", "react"]
}
複製程式碼webpack babel-loader 配置
// 在webpack.config.js 的modules.rules中加入此配置
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
複製程式碼html-webpack-plugin 模板配置
我們知道react需要獲取頁面一個根元素，然後render才會生效，我們可以新建一個html檔案，讓html-webpack-plugin外掛基於這個檔案來進項打包。
所以我們在根目錄下新建一個html檔案，以此檔案作模板。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
// react需要的渲染根元素
<div id="root"></div>
</body>
</html>
複製程式碼此時webpack.config.js配置:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template: './index.html' // 模板檔案位置
})
]
};
複製程式碼書寫React，執行webpack
// src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import './main.css'
ReactDom.render(
<h1>hello world</h1>,
document.getElementById('root')
);
複製程式碼執行npm run build，生成dist目錄，開啟dist目錄中的index.html檔案，可以發現瀏覽器已正常渲染"hello world"。
dev環境熱更新配置
react的wepack完成以後，是不是發現每修改一次程式碼，想看到效果，得重新打包一次才行。webpack-dev-server配置可以幫助我們實現熱更新，在開發環境解放我們的生產力。
安裝webpack-dev-server
npm install webpack-dev-server --save-dev
複製程式碼webpack.config.js 配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template: './index.html'
}),
// hot 檢測檔案改動替換plugin
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
// webpack-dev-server 配置
devServer: {
contentBase: './dist',
hot: true
},
};
複製程式碼執行webpack-dev-server
在 package.json 檔案 加入 scripts 配置：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},
複製程式碼命令列執行 npm run dev
可以在瀏覽器中輸入localhost:8080 內容即為dist目錄下的index.html內容。修改src/index.js中的內容或者依賴，即實時在瀏覽器熱更新看到。
至此，react的webpack的基礎開發環境已全部配置完畢。