這次帶給大家應該如何搭建webpack react開發環境，搭建webpack react開發環境的注意事項有哪些，下面就是實戰案例，一起來看一下。
環境主要依賴版本
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
webpack安裝及設定
#1. 起步新專案目錄，初始化npm，新開發來源目錄mkdir webpack-react && cd webpack-react npm init -y mkdir src
npm install webpack webpack-cli --save-dev
設定檔
在專案根目錄新建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') // 打包后自动输出目录
}
}"scripts": {
"build": "webpack"
}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
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']
}
]
}
}cd src && touch main.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
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
]
};<!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>
├── dist // 生产目录 │ ├── app.js │ └── index.html ├── package.json ├── src // 源目录 │ ├── index.js │ └── main.css └── webpack.config.js
npm install react react-dom --save
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.config.js 的modules.rules中加入此配置
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> // react需要的渲染根元素 <p id="root"></p> </body> </html>
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' // 模板文件位置
})
]
};// 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的基础开发环境已全部配置完毕。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是應該如何搭建webpack+react開發環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！
