webpack学习（八）：配置react

demo地址: https://github.com/Lkkkkkkg/webpack-demo
目前配置了 HtmlWebpackPlugin , CleanWebpackPlugin 插件, 使用了 source map 功能 , 和 webpack-dev-serve 服务器, 配置详情浏览 webpack 配置系列: https://blog.csdn.net/qq593249106/article/details/84892069

在前面的配置后, 更改了目录结构, 新建一个 App.js 为了分离 React 入口文件和主文件, 还新建了一个 index.html 作为模板文件, 是为了 HtmlWebpackPlugin 插件生成的页面有 < div id = 'root '></ div> 这个根 div 让 react 完成渲染
目录结构:

|- /node_modules
|- /src //用于放源文件的文件夹
  |- /components
  |- /index //模板文件
    |- index.html //模板文件
    |- index.js //入口文件
    |- App.js //react主文件
|- package.json
|- webpack.config.js //webpack配置文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>

index.js

import React from 'react'
import { render } from 'react-dom'
import App from './App'

render(<App />, document.getElementById("root"))

App.js

import React from 'react'

const App = () => (
    <h1>
        Hello, React!<br />
    </h1>
)

export default App

别忘了修改一下入口文件配置, 加上一个 mode: development 属性, 代表是开发模式
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
	mode: 'development',
    entry: './src/components/index/index.js', //入口文件
    devtool: 'inline-source-map', // 不同选项适用于不同环境
    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8080 //端口号设为8080, 默认也是8080
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(['dist']), //设置清除的目录
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            template: "./src/components/index/index.html" //指定模板文件的位置
        })
    ],
    output: {
        filename: 'bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};

package.json

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

安装

安装 react, 终端输入:

npm install react react-dom --save-dev

React 组件由 JSX 组成, 浏览器无法识别 JSX , 需要 babel 进行转换

babel-croe (为babel核心文件)
babel-preset-env (将ES6转义成ES5)
babel-preset-react (将JSX转义成js)
babel-loader (webpack的babe转换)

npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev

安装完后, 在根目录下新建一个 .babelrc 文件, 它是bable的核心配置文件, 内容如下:
.babelrc

{
  "presets": ["env", "react"]
}

配置 webpack.config.js

然后在 webpack 配置转 jsx 和 es6 的 rule:
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
	mode: 'development',
    entry: './src/components/index/index.js', //入口文件
    devtool: 'inline-source-map', // 不同选项适用于不同环境
    devServer: {
        contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
        port: 8080 //端口号设为8080, 默认也是8080
    },
    module: {
        rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
            {
                exclude: /node_modules|packages/, //路径
                test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                use: 'babel-loader', //使用的加载器名称
            },
        ]
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new CleanWebpackPlugin(['dist']), //设置清除的目录
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            template: "./src/components/index/index.html" //指定模板文件的位置
        })
    ],
    output: {
        filename: 'bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};

运行服务器

终端输入 npm run dev

npm run dev

发现报错 Error: Cannot find module ‘@babel/core’
babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.

通过看 package.json 文件发现我的 bable-loader 是8版本, 尝试卸载, 然后重新安装 bable-loader7 版本:

npm uninstall babel-loader
npm install babel-loader@7.1.5 --save-dev

重新运行服务器:

npm run dev

弹出网页, 配置成功
在这里插入图片描述