预览

• 如何安装和配置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

以上工具的作用是：

1. babel-loader：webpack项目里当 import 一个 .jsx 文件时，babel-loader 使用 @babel/core 来执行转换，babel-loader 是负责与 Babel 对话；

2. @babel-core：转换的核心工具，负责整体的转换统筹，它还是要调用其他插件进行具体的转换；

3. @babel/preset-env：babel 的 @babel/preset-env 插件用于把最新的ES转成ES5；

4. @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"
    },
    ...

作者：MrTon_1965
链接：https://www.jianshu.com/p/59a2c3a84e2c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。