• 从零开始使用webpack搭建一个react项目

    先做一个正常编译es6语法的webpack demo

    1. 初始化package.json文件

    npm init一路enter下去

    2. 添加插件

    1. {
    2.   "name": "demo",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "index.js",
    6.   "scripts": {
    7.     "test": "echo \"Error: no test specified\" && exit 1",
    8.     "devBuild": "cross-env NODE_ENV=development webpack --config build/webpack.config.js",
    9.     "start:dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
    10.     "start:prod": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.config.js",
    11.     "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
    12.   },
    13.   "keywords": [],
    14.   "author": "",
    15.   "license": "ISC",
    16.   "devDependencies": {
    17.     "@babel/core": "^7.0.0",
    18.     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    19.     "@babel/preset-env": "^7.22.20",
    20.     "@babel/preset-react": "^7.22.15",
    21.     "@babel/preset-typescript": "^7.23.0",
    22.     "@reduxjs/toolkit": "^1.9.7",
    23.     "@types/react": "^18.2.27",
    24.     "@types/react-dom": "^18.2.12",
    25.     "autoprefixer": "^9.7.3",
    26.     "axios": "^1.5.1",
    27.     "babel-core": "^7.0.0-bridge.0",
    28.     "babel-loader": "7",
    29.     "babel-preset-env": "^1.7.0",
    30.     "clean-webpack-plugin": "^3.0.0",
    31.     "cross-env": "^7.0.3",
    32.     "css-loader": "^3.2.1",
    33.     "file-loader": "^5.0.2",
    34.     "happypack": "^5.0.1",
    35.     "html-webpack-plugin": "^3.2.0",
    36.     "less": "^3.10.3",
    37.     "less-loader": "5.0.0",
    38.     "mini-css-extract-plugin": "^0.8.0",
    39.     "optimize-css-assets-webpack-plugin": "^5.0.3",
    40.     "postcss-loader": "^3.0.0",
    41.     "react-redux": "^8.1.3",
    42.     "redux": "^4.2.1",
    43.     "redux-persist": "^6.0.0",
    44.     "style-loader": "^1.0.1",
    45.     "terser-webpack-plugin": "^2.2.2",
    46.     "typescript": "^5.2.2",
    47.     "url-loader": "^3.0.0",
    48.     "webpack": "^4.41.2",
    49.     "webpack-cli": "^3.3.10",
    50.     "webpack-dev-server": "^3.9.0",
    51.     "webpack-merge": "^4.2.2",
    52.     "webpack-parallel-uglify-plugin": "^1.1.2"
    53.   },
    54.   "dependencies": {
    55.     "antd": "^5.10.0",
    56.     "lodash": "^4.17.15",
    57.     "moment": "^2.24.0",
    58.     "react": "^18.2.0",
    59.     "react-dom": "^18.2.0"
    60.   }
    61. }

    注意: babel相关插件最好是同一个数字版本开头的, 比如7.xx.xx, 因为页面报babel-loader编译问题, 提示是版本不一致

    另外因为我使用了redux, 复杂的项目可以使用它, 简单的项目context或者recoil就行了, 按需下载, 不需要的可以卸载

    3. react多页配置

    1) webpack.common.js拆分公共部分

    1. const path = require('path')
    2. const HtmlWebpackPlugin = require('html-webpack-plugin')
    3. const { srcPath, distPath } = require('./paths')
    4.  
    5. module.exports = {
    6.     entry: {
    7.         index: path.join(srcPath, 'index.tsx'),
    8.         other: path.join(srcPath, 'other.tsx')
    9.     },
    10.     resolve: {
    11.         extensions: ['.tsx', '.ts', '.jsx', '.js']
    12.     },
    13.     module: {
    14.         rules: [
    15.             {
    16.                 test: /.(jsx?)|(ts?x?)$/,
    17.                 loader: ['babel-loader'],
    18.                 include: srcPath,
    19.                 exclude: /node_modules/
    20.             },
    21.         ]
    22.     },
    23.     plugins: [
    24.         // 多入口 - 生成 index.html
    25.         new HtmlWebpackPlugin({
    26.             template: path.join(srcPath, 'index.html'),
    27.             filename: 'index.html',
    28.             // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
    29.             chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
    30.         }),
    31.         // 多入口 - 生成 other.html
    32.         new HtmlWebpackPlugin({
    33.             template: path.join(srcPath, 'other.html'),
    34.             filename: 'other.html',
    35.             chunks: ['other', 'common']  // 考虑代码分割
    36.         })
    37.     ]
    38. }

    2) webpack.dev.js:

    dev环境需要的webpack配置, 注意与webpack.common.js的逻辑进行合并

    1. const path = require('path')
    2. const webpack = require('webpack')
    3. const webpackCommonConf = require('./webpack.common.js')
    4. const { smart } = require('webpack-merge')
    5. const { srcPath, distPath } = require('./paths')
    6.  
    7. module.exports = smart(webpackCommonConf, {
    8.     mode: 'development',
    9.     module: {
    10.         rules: [
    11.             // 直接引入图片 url
    12.             {
    13.                 test: /\.(png|jpg|jpeg|gif)$/,
    14.                 use: 'file-loader'
    15.             },
    16.             {
    17.                 test: /\.css$/,
    18.                 // loader 的执行顺序是：从后往前
    19.                 loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
    20.             },
    21.             {
    22.                 test: /\.less$/,
    23.                 // 增加 'less-loader' ，注意顺序
    24.                 loader: ['style-loader', 'css-loader', 'less-loader']
    25.             }
    26.         ]
    27.     },
    28.     plugins: [
    29.         new webpack.DefinePlugin({
    30.             // 'development'
    31.             'process.env': {
    32.                 NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    33.             }
    34.         })
    35.     ],
    36.     devServer: {
    37.         port: 8111,
    38.         progress: true,  // 显示打包的进度条
    39.         contentBase: distPath,  // 根目录
    40.         open: true,  // 自动打开浏览器
    41.         compress: true,  // 启动 gzip 压缩
    42.         // 设置代理
    43.         proxy: {
    44.             // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
    45.             '/api': 'http://localhost:8000',
    46.  
    47.             // 将本地 /api2/xxx 代理到 localhost:3000/xxx
    48.             '/api2': {
    49.                 target: 'http://localhost:8111',
    50.                 pathRewrite: {
    51.                     '/api2': ''
    52.                 }
    53.             }
    54.         }
    55.     }
    56. })

    3) webpack.production.js:

    production环境需要的webpack配置, ,注意与webpack.common.js的逻辑进行合并

    1. const path = require('path')
    2. const webpack = require('webpack')
    3. const { smart } = require('webpack-merge')
    4. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    5. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    6. const TerserJSPlugin = require('terser-webpack-plugin')
    7. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    8. const webpackCommonConf = require('./webpack.common.js')
    9. const { srcPath, distPath } = require('./paths')
    10.  
    11. module.exports = smart(webpackCommonConf, {
    12.     mode: 'production',
    13.     output: {
    14.         // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
    15.         filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
    16.         path: distPath,
    17.         // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    18.     },
    19.     module: {
    20.         rules: [
    21.             // 图片 - 考虑 base64 编码的情况
    22.             {
    23.                 test: /\.(png|jpg|jpeg|gif)$/,
    24.                 use: {
    25.                     loader: 'url-loader',
    26.                     options: {
    27.                         // 小于 5kb 的图片用 base64 格式产出
    28.                         // 否则，依然延用 file-loader 的形式，产出 url 格式
    29.                         limit: 5 * 1024,
    30.  
    31.                         // 打包到 img 目录下
    32.                         outputPath: '/img1/',
    33.  
    34.                         // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
    35.                         // publicPath: 'http://cdn.abc.com'
    36.                     }
    37.                 }
    38.             },
    39.             // 抽离 css
    40.             {
    41.                 test: /\.css$/,
    42.                 loader: [
    43.                     MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
    44.                     'css-loader',
    45.                     'postcss-loader'
    46.                 ]
    47.             },
    48.             // 抽离 less
    49.             {
    50.                 test: /\.less$/,
    51.                 loader: [
    52.                     MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
    53.                     'css-loader',
    54.                     'less-loader',
    55.                     'postcss-loader'
    56.                 ]
    57.             }
    58.         ]
    59.     },
    60.     plugins: [
    61.         new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
    62.         new webpack.DefinePlugin({
    63.             'process.env': {
    64.                 NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    65.             }
    66.         }),
    67.  
    68.         // 抽离 css 文件
    69.         new MiniCssExtractPlugin({
    70.             filename: 'css/main.[contentHash:8].css'
    71.         })
    72.     ],
    73.  
    74.     optimization: {
    75.         // 压缩 css
    76.         minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    77.  
    78.         // 分割代码块
    79.         splitChunks: {
    80.             chunks: 'all',
    81.             /**
    82.              * initial 入口 chunk，对于异步导入的文件不处理
    83.                 async 异步 chunk，只对异步导入的文件处理
    84.                 all 全部 chunk
    85.              */
    86.  
    87.             // 缓存分组
    88.             cacheGroups: {
    89.                 // 第三方模块
    90.                 vendor: {
    91.                     name: 'vendor', // chunk 名称
    92.                     priority: 1, // 权限更高，优先抽离，重要！！！
    93.                     test: /node_modules/,
    94.                     minSize: 0,  // 大小限制
    95.                     minChunks: 1  // 最少复用过几次
    96.                 },
    97.  
    98.                 // 公共的模块
    99.                 common: {
    100.                     name: 'common', // chunk 名称
    101.                     priority: 0, // 优先级
    102.                     minSize: 0,  // 公共模块的大小限制
    103.                     minChunks: 2  // 公共模块最少复用过几次
    104.                 }
    105.             }
    106.         }
    107.     }
    108. })

    4) 可以再加一个webpack.config.js文件:

    根据环境判断是使用webpack.dev.js还是webpack.production.js

    1. const prodConfig = require('./webpack.prod.js');
    2.  
    3. const webpackConfig = process.env.NODE_ENV !== 'development' ? prodConfig : () => import('./webpack.dev.js');
    4. module.exports = webpackConfig;

    5) 在package.json添加如下命令:

    1. "scripts": {
    2.     "test": "echo \"Error: no test specified\" && exit 1",
    3.     "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
    4.     "buil:debv": "cross-env NODE_ENV=development webpack --config build/webpack.config.js",
    5.     "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
    6.   },
    cross-env改变process.env.NODE_ENV的值, 在控制台可以打印出来

    console.log(process.env.NODE_ENV);

    4. 新建index.html, index.tsx, other.html, other.tsx文件

    index.tsx文件

    1. // index.tsx
    2. import React from 'react'
    3. import ReactDOM from 'react-dom/client'
    4. /**
    5.  * 不加后缀.tsx的配置: 在module.exports对象中追加=>
    6.  * resolve: {
    7.         extensions: ['.js', '.jsx', '.tsx', '.ts']
    8.     },
    9.  */
    10. import App from './App';
    11. const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
    12. // v18 的新方法
    13. root.render(<App />)

    index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>webpack demo</title>
    8. </head>
    9. <body>
    10.     <p>webpack demo</p>
    11.     <div id="root"></div>
    12. </body>
    13. </html>

    other.tsx和other.html差不多一样按react要求写, 写出差异页面能够看出是不同页面就行

    5. 新建.babelrc文件

    1. {
    2.     "presets": [
    3.         "@babel/preset-react", 
    4.         "@babel/preset-typescript",
    5.     ],
    6.     "plugins": []
    7. }

    6. 新建postcss.config.js文件

    1. module.exports = {
    2.     plugins: [require('autoprefixer')]
    3. }

    7. 新建tsconfig文件

    1. {
    2.   "compilerOptions": {
    3.     "target": "es5",
    4.     "lib": [
    5.       "dom",
    6.       "dom.iterable",
    7.       "esnext"
    8.     ],
    9.     "allowJs": true,
    10.     "skipLibCheck": true,
    11.     "esModuleInterop": true,
    12.     "allowSyntheticDefaultImports": true,
    13.     "strict": true,
    14.     "forceConsistentCasingInFileNames": true,
    15.     "module": "esnext",
    16.     "moduleResolution": "node",
    17.     "resolveJsonModule": true,
    18.     "isolatedModules": true,
    19.     "noEmit": true,
    20.     "jsx": "react-jsx",
    21.     "noImplicitAny": false
    22.   },
    23.   "include": [
    24.     "src"
    25.   ]
    26. }

    5. Test组件

    1. import React, { useEffect, useState } from "react";
    2. import _ from "lodash";
    3.  
    4. const Test = () => {
    5.   const [data, setData] = useState({ a: "hello world" });
    6.   useEffect(() => {
    7.     setData({ a: "gggg" });
    8.     console.log("process", process.env.NODE_ENV, process.env);
    9.   }, []);
    10.   return <div>{_.get(data, "a")}</div>;
    11. };
    12.  
    13. export default Test;

    6. 在App.tsx组件中引入Test组件测试效果

    1. import React, { Suspense, lazy } from "react";
    2. import { Spin } from "antd";
    3. import Test from "./Test";
    4.  
    5. const App: React.FC = () => {
    6.   return (
    7.     <Suspense fallback={<Spin />}>
    8.       <Test />
    9.     </Suspense>
    10.   );
    11. };
    12.  
    13. export default App;

    index.html效果图如下:

    other.html效果图如下:

  • 相关阅读:
    【SQL刷题】DAY16----SQL高级联结专项练习
    资本+商业模式+中国制造的出海跨境电商，走向世界！(Starday)
    设计模式-原型模式
    我的NVIDIA开发者之旅——CUDA编程基础——并行矩阵乘法
    七天接手react项目 系列 —— state&事件处理&ref
    Java项目防止SQL注入的几种方案
    1.1 异步相关概念：初步了解
    Golang goroutine MPG模式浅析
    面试现场！月薪3w+的这些数据挖掘SQL面试题你都掌握了吗？ ⛵
    Hive学习(待续)
  • 原文地址：https://blog.csdn.net/qq_42750608/article/details/133774421