一. 安装需要的依赖
首先, 在一个空文件夹下, 命令行运行 yarn init -y 初始化
安装 webpack 相关
yarn add webpack webpack-cli webapack-dev-server html-webpack-plugin -D
- 加 -D 表示在是只开发环境下使用的包
- webpack 和 webpack-cli 是搭建 webpack 环境必须的, 不多讲
- webpack-dev-server 可以在开发环境搭建一个本地的服务器
- html-webpack-plugin 用来打包html文件
安装相关的 babel 插件
yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader -D
- @babel/core 是babel 的核心库, 把代码生成AST(语法树)
- @babel/preset-env 用来把es6语法编译成老版本浏览器可能兼容的语法
- @babel/preset-react 把react使用的jsx语法编译成 js
- babel-loader 是让 babel 在 webpack 下运行的专用于webpack的loader
安装react
yarn add react react-dom
css 相关
yarn add css-loader style-loader -D
- css-loader 的作用是 解析css内依赖关系的库(比如background-image 使用的url(), @import语法引入的css等)
- style-loader的作用是把打包出来的 css 插入到页面内
准备一些文件
在当前目录新建一个名为 webpack.config.js 的文件, 这将是配置webpack的文件
在当前目录下, 新建一个 src 文件夹, 内有一个 index.html 和 index.js 文件
这两个文件分别作为html的入口文件和模块(js)的入口文件
其中, html 文件内需要有一个 id 为 root 的 div, 如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack react </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
二. 配置 webpack
webpack.config.js的代码如下
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 按照 commonjs的规范, 导出一个对象
module.exports = {
// js 的入口文件
entry: './src/index.js',
output: {
// 打包产生的文件的目录, 在当前目录下的dist文件
path: path.resolve(__dirname, 'dist'),
// 生成 js 代码的文件名
filename: 'boundle[hash].js',
},
devServer: {
// 开发环境服务器的端口
// 这样就可以在 localhost:8080访问
port: 8080,
// 开启热加载
hot: true,
},
// 模式为生产模式, 即打包生成的 js 会压缩
mode: 'production',
module: {
// 用正则匹配不同类型(后缀)的文件, 并且使用不同的loader去处理它们
rules: [
{
// 符合以 .js 或者 .jsx 结尾的文件, 使用 babel-loader
test: /\.(js|jsx)$/,
// 打包时, 不去node_modules 目录下找
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
// 匹配以.css结尾的文件
test: /\.css$/,
exclude: /node_modules/,
// 先后使用 css-loader 和 style-loader
// 注意执行顺序是从右向左
use: ['style-loader', 'css-loader'],
}
]
},
// 开启 source-map 模式
devtool: 'source-map',
plugins: [
new HtmlWebpackPlugin({
// 打包启用的模板
template: './src/index.html',
打包生成的文件名
filename: 'index.html',
minify: {
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //删除空白符与换行符
}
}),
new webpack.HotModuleReplacementPlugin
],
}
其中, babel 插件的一些配置可以写在另外一个文件中, 文件名是 .babelrc(注意 ".")
目前, .babelrc 代码如下
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
有时, 写 react 的时候, 会使用静态属性和装饰器这些提案中的语法
就像这样
// 类的装饰器
@log
class Input extends React.Component {
// 类的静态属性
state = {
name: 'my name'
}
constructor(props) {
super(props)
this.change = this.change.bind(this)
}
change(event) {
this.props.bindChange(event.target.value)
}
render() {
return <input onInput={this.change}/>
}
}
function log(target) {
target.RUOK = true
}
上面的配置并不能识别这些语法
需要另外的2个babel插件(当然, webpack 在编译的时候会提示要去装这些)
运行yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
然后在 .babelrc 下配置这两个插件
配置之后的代码如下
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
这样, 就可以跑一个react的项目了, 当然, 在实际开发中, 需要配置的比现在的要多很多
三. 最后
项目代码地址: https://github.com/xianjiezh/webpack-react
在这里面添加了更多的插件和配置
如果有问题欢迎给我留言
