React 使用webpack打包

Posted 一杯清泉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 使用webpack打包相关的知识,希望对你有一定的参考价值。

一、项目创建

1、新建一个项目文件夹,打开终端,切换到到项目目录下:

npm init -y

这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。

2、新建一个文件夹public,在文件夹内创建index.html文件,添加:

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

3、新建一个文件src/index.js,暂时先不写内容。

二、打包依赖配置

1、添加webpack

yarn add webpack webpack-cli --dev

webpack:打包依赖
webpack-cli:打包命令的协议

2、配置babel

yarn add babel-loader @babel/core @babel/preset-env --dev

babel-loader、@babel/core、@babel/preset-env:babel-loader的核心支持库

三、打包配置文件

1、在项目的根目录下新建webpack.config.js文件夹,配置打包模块。

const path = require('path');

module.exports = 
	//打包环境,测试环境还是生产环境,不添加会报警告
    mode: 'development',
    //相对路径
    entry: 
        app: './src/index.js'
    ,
    //输出配置
    output: 
    	//输出在项目根目录的dist文件夹,会自动创建
        path: path.resolve(__dirname, './dist'),
        //js的文件名称
        filename: '[name].bundle.js',
    

2、执行命令

yarn run webpack

会生成一个文件夹dist,包含一个app.bundle.js空的文件,这样说明初步就配置成功。

四、配置html-webpack-plugin

yarn add html-webpack-plugin --dev

webpack.config.js配置插件:

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

module.exports = 
    mode: 'development',
    entry: 
        app: './src/index.js'
    ,
    output: 
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    ,
    plugins: [
        new HtmlWebpackPlugin(
        	//模板路径,注意需要和index.html路径对应
            template: path.resolve(__dirname, './public/index.html'),
            //文件名称
            filename: 'index.html',
        )
    ]

再次执行:

yarn run webpack

会在dist文件夹下生成app.bundle.js和index.html,并且自动添加了<script defer src="app.bundle.js"></script>。

五、配置其他webpack插件

        每次打包都会生成dist文件夹,有的可能不需要,就需要在打包前清理,每次手动清理太麻烦,添加插件自动清理,有时候还需要检查错误,有需要error插件。

yarn add clean-webpack-plugin friendly-errors-webpack-plugin --dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require("clean-webpack-plugin");
const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = 
    ……省略……
    plugins: [
        new HtmlWebpackPlugin(
            template: path.resolve(__dirname, './public/index.html'),
            filename: 'index.html',
        ),
        new CleanWebpackPlugin(),
        new friendlyErrorsWebpackPlugin(),
    ]

六、支持jsx语法

1、添加React支持

yarn add react react-dom

2、添加jsx的babel

yarn add @babel/preset-react --dev

3、配置webpack.config.js

module.exports = 

    ……省略……

    module: 
        rules: [
            
                test: /\\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            
        ],
    

4、根目录下新建.babelrc文件,添加:


  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]

5、在src/index.js下添加

import React from 'react'
import ReactDOM from 'react-dom'
import App from "./App";

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

再次执行:

yarn run webpack

预览dist/index.html显示内容,说明就集成成功。

七、实时预览

每次预览都需要yarn run webpack太麻烦,需要配置service自动加载。

1、添加

yarn add webpack-dev-server --dev

2、配置

module.exports = 

	……省略……

	devServer: 
	    static: 
	        directory: path.join(__dirname, './dist'),
	    ,
	    compress: true,
	    port: 3100,
	

4、开启端口监听

yarn run webpack serve

访问http://localhost:3100/会显示预览内容,修改index.js内容并保存,会实时更新。

八、配置scripts

在package.json添加:


"scripts": 
	"build": "webpack",
	"start": "webpack serve"

运行:

yarn start:开启服务
yarn build:重新打包

九、项目结构

1、package.json:


  "homepage": "./",
  "name": "comments-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "build": "webpack",
    "start": "webpack serve"
  ,
  "author": "",
  "license": "ISC",
  "dependencies": 
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  ,
  "devDependencies": 
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.0",
    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^5.5.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4",
    "webpack-merge": "^5.8.0"
  

2、项目结构如下:

 3、下载地址:

https://download.csdn.net/download/yoonerloop/83976375

以上是关于React 使用webpack打包的主要内容,如果未能解决你的问题,请参考以下文章

webpack打包react,防止打包文件过大

node.js学习之webpack打包react最简单用法

Webpack系列教程打包一个简单的React应用

webpack 打包一个简单react组件

webpack打包优化之react-router路由分割

webpack简介