1. 建立项目结构
-- your project
|-- dist(项目输出打包目录)
|-- src(项目源代码)
|-- index.js
|-- webpack.config.js
|-- package.json
2. 安装项目依赖
// 安装 react
npm install react react-dom --save-dev
// 安装 webpack
npm install webpack --save
npm install webpack-cli --save
npm install webpack-dev-server --save
// 安装 babel
npm install @babel/core --save
npm install @babel/preset-env --save
npm install @babel/preset-react --save
// 安装支持 jsx 的插件
npm install babel-loader --save
// 安装 webpack 插件
npm install html-webpack-plugin --save
npm install clean-webpack-plugin --save
3. 建立 .babelrc 文件
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
4. 配置 webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
mode: 'development', // 开发模式(development)或生产模式(production)
entry: { // 入口文件
index: './src/index.js'
},
output: { // 出口文件
publicPath: '/', // 解决单页面应用刷新404的问题，原因还在继续研究中。。。
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist') // 确保为绝对路径
},
devServer: { // 配置本地服务器环境
contentBase: path.join(__dirname, 'src'), // 目录
host: 'localhost', // 域名
port: 3000, // 端口号
open: true, // 自动打开浏览器
hot: true, // 是否启动热更新
historyApiFallback: true, // 解决单页面应用刷新404的问题，原因还在继续研究中。。。
},
module: { // 配置 loader
rules: [
{
test: /\.(js|jsx)/,
use: ['babel-loader'],
exclude: /node_modules/
}
]
},
plugins: [ // 配置插件
new webpack.HotModuleReplacementPlugin(), // 与热更新一起使用
new HtmlWebpackPlugin({ // 打包后的模板插件配置
filename: 'index.html', // 生成 HTML 文件的名称
chunks: ['index'], // 引入 js 文件的名称(就是 entry 中的 key 值)
minify: { // 压缩页面资源
collapseWhitespace: true, // 压缩空格
},
template: path.resolve(__dirname, 'src/index.html'), // 模板的路径
hash: true // 消除缓存
}),
new CleanWebpackPlugin(), // 每次打包前清除上一次打包的文件
]
}
5. 修改 package.json 文件
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
6. 在 src 文件夹下的 index.js 文件中输入如下代码
import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return <h1>Hello World</h1>
}
ReactDOM.render(
<App></App>,
document.getElementById('root')
);
7. 在根目录中启动命令行输入 npm run dev 即可运行成功
