1. 安装模块
- 初始化
npm init -y 自动配置
npm init 手动配置
- 安装react模块
# 安装react
cnpm install react --save
# 安装react-dom
cnpm install react-dom --save
- 安装webpack模块
webpack-cli 用来执行webpack命令
# 安装webpack和webpack-cli
cnpm install webpack webpack-cli --save-dev
- 安装babel相关
# 安装 babel和react相关加载器
cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
- 安装css加载器
cnpm i css-loader style-loader -D
- 安装HTML插件
cnpm i html-webpack-plugin -D
2. 创建目录结构
myapp
– public [静态资源文件目录]
– src [ 项目源文件目录 ]
– dist [ 打包文件目录 ]
– webpack.config.js [ webpack配置文件 ]
– package.json [ NPM包管理配置文件 ]
– node_modules [ 项目中的依赖存放目录 ]
- 在public目录下，创建index.html，该文件为项目的默认首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Hello React Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- 在src目录下，创建index.js，该文件为项目的入口文件
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>Hello React!</div>,document.getElementById('root'));
- 在项目的根目录下创建webpack.config.js配置文件，依次完成以下配置：
（1）配置入口（entry）
module.exports = {
entry:'./src/index.js'
}
（2）配置出口（output）
const path = require('path');
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}
（3）配置加载器（loader）
module.exports = {
// ...
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
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
}
}
}
]
}
}
（4）配置插件（plugin）
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
}
- 配置
npm run build命令执行打包操作：
//在 package.json 文件添加 build 项
{
"scripts": {
"build": "webpack --mode production"
}
}
3. 执行命令
- 执行打包命令：
npm run build
- 运行（根据自己的package.json 文件）
npm run start