预览
- 如何安装和配置webpack
- 如何安装和配置Babel
- 如何搭建React环境
- 如何安装和配置Webpack可发服务器
设置项目
首先，为项目创建目录
mkdir webpack-react-tutorial && cd webpack-react-tutorial
创建用于保存代码的最小目录结构：
mkdir -p src
通过运行以下项目来初始化项目：
npm init -y
设置Webpack
让我们通过运行以下命令安装webpack和webpack-cli
npm i webpack webpack-cli --save-dev
现在在里面添加webpack命令package.json
"scripts": {
"build": "webpack --mode production"
}
此时，无需为webpack定义配置文件。较旧的webpack版本会自动查找配置文件。从版本4开始，情况不再如此。
当然，对于新的webpack版本，我们还是可以自定义一个webpack.config.js的配置文件的。
设置 Babel 解释 JSX
React组件只要是用现代JavaScript语法编写的。以class关键字为例，有状态的React组件可以声明为类或箭头（或常规函数）。但是旧版浏览器无法理解ECMAScript 2015，因此我们需要某种转换。
这种转换称为转换。Webpack本身不知道如何转换JavaScript。相反，它依赖于loader作为转换工具。一个webpack loader将某些东西作为输入并产生一个输出，称为bundle。
babel-loader 是负责与 Babel 对话的 webpack loader。同时 Babel 必须配置预设（preset，预先配置好一组插件）：
- @babel/preset-env 用于将现代JavaScript编译为ES5
- @babel/preset-react 可将JSX和其他内容编译为JavaScript
安装依赖项：
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
以上工具的作用是：
- babel-loader：webpack项目里当 import 一个 .jsx 文件时，babel-loader 使用 @babel/core 来执行转换，babel-loader 是负责与 Babel 对话；
- @babel-core：转换的核心工具，负责整体的转换统筹，它还是要调用其他插件进行具体的转换；
- @babel/preset-env：babel 的 @babel/preset-env 插件用于把最新的ES转成ES5；
- @babel/preset-react：使用 @babel/preset-react 把 JSX 转换为正常的 JavaScript。
在项目根目录中创建 .babelrc文件，该文件的作用是告诉babel-core在执行转换的时候使用如下插件：
presets就是预设的意思，意思打包需要使用的一组插件
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
或者
{
"presets": [
"@babel/preset-env"
],
"plugins": [
["transform-react-jsx", {
"pragma": "React.createElement"
}]
]
}
@babel/preset-react里面包含了插件ransform-react-jsx，所以都可以正常启动。
创建一个名为webpack.config.js，内容如下：
const path = require('path';
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/, exclude: /node_modules/,
use: ['babel-loader']
]
},
// 这个插件会自动根据JS生成一个HTML
plugins: [ new HtmlWebpackPlugin() ],
output: {
filename: '[name].[hash:5].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: { contentBase: './dist' }
}
上面这个配置对于每一个带有js或者jsx扩展名的文件，Webpack都会通过babel-loader处理代码。
为了使环境能正常启动，需要安装 html-webpack-plugin 和 webpack-dev-server
npm i --save-dev html-webpack-plugin webpack-dev-server
修改 package.json
{
...
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
...
}