react webpack配置

接上期 webpack的基础配置
同样附上个人git仓库地址：https://gitee.com/zhaosir1/webpack-base-react-cli.git
详细注释请参考:webpack的基础配置 https://blog.csdn.net/qq_45142260/article/details/125345042
废话不多说，直接上代码

目录结构
webpack.config.js
其中 imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo 这几个插件不太容易能够下载下来，可私聊我单独发，或者访问我主页，我上传的资源，其中有个关于webpack图片压缩的插件下载即可。下载地址：https://download.csdn.net/download/qq_45142260/85709385
webpack.config.js文件是把webpack.dev.js和webpack.prod.js合并之后的文件，这样会使文件比较整洁一点


const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const path = require('path')
// 判断当前环境
const isProduction = process.env.NODE_ENV === 'production'
function getStyleLoaders (pre) {return [//根据不同环境使用不同的loader--开发环境不需要css压缩和单独抽离isProduction ? MiniCssExtractPlugin.loader : 'style-loader','css-loader',{// 处理css兼容性// 配合package.json 中browserslit来指定兼容性loader:'postcss-loader',options:{postcssOptions:{plugins:['postcss-preset-env'],}}},pre && {loader:pre,// 针对antd的高级配置使用options:pre === 'less-loader'?{// antd的主题色设置lessOptions: {modifyVars: { '@primary-color': '#f00' },javascriptEnabled: true,}}:{}}].filter(Boolean)
}
module.exports = {entry: './src/main.js',output: {// 环境判断，输出文件位置、文件名称、缓存文件名称等path: isProduction ? path.resolve(__dirname,'../dist') : undefined,filename: isProduction ? 'static/js/[name].[contenthash:10].chunk.js' : 'static/js/[name].js',chunkFilename: isProduction ? 'static/js/[name].[contenthash:10].chunk.js' : 'static/js/[name].chunk.js',assetModuleFilename: 'static/media/[hash:10][ext][query]',clean:true},module: {rules: [//css{test: /\.css$/,use:getStyleLoaders(),},{test: /\.less$/,use:getStyleLoaders('less-loader'),},{test: /\.s[ac]ss$/,use:getStyleLoaders('sass-loader'),},{test: /\.styl$/,use:getStyleLoaders('stylus-loader'),},//图片{test:/\.(jpe?g|png|svg|gif)/,type:"asset",parser:{dataUrlCondition:{maxSize:10 * 1024,},}},//其他资源{test:/\.(woff2?|ttf)/,type:'asset/resource'},//js{test:/\.jsx?$/,include:path.resolve(__dirname,'../src'),loader:'babel-loader',options:{cacheDirectory:true, //开启缓存cacheCompression:false, //不压缩缓存文件plugins:[// 生产环境不需要激活HMR功能!isProduction && 'react-refresh/babel' //激活js的HMR功能].filter(Boolean)}}]},// 处理htmlplugins:[// Eslint语法检查new EslintWebpackPlugin({context:path.resolve(__dirname,'../src'), //指定处理文件范围exclude:'node_modules', //排除node_modules文件夹cache:true, //开启缓存//配置缓存文件位置cacheLocation:path.resolve(__dirname,'../node_modules/.cache/.eslintcache'),}),// 处理html文件内容new HtmlWebpackPlugin({//配置处理 public 下的 index.html 文件template:path.resolve(__dirname,'../public/index.html')}),//开发环境不需要css压缩isProduction && new MiniCssExtractPlugin({filename:'static/css/[name],[contenthash:10].css',chunkFilename:'static/css/[name],[contenthash:10].chunk.css',}),//开发环境不需要public文件的copyisProduction && new CopyPlugin({patterns:[{from:path.resolve(__dirname,'../public'),to:path.resolve(__dirname,'../dist'),globOptions: {dot: true,gitignore: true,ignore: ["**/index.html*"],//忽略index.html文件},}]}),!isProduction && new ReactRefreshWebpackPlugin()].filter(Boolean), //过滤掉为undefined的pluginmode:isProduction?'production':'development',devtool:isProduction ? 'source-map':'cheap-module-source-map',optimization:{splitChunks:{chunks:'all',// 由于node_modules文件打包之后会生成一个特别大的文件夹，// 因此需要手动配置分包cacheGroups:{// react react-dom react-router-dom 相关的 一起打包react:{test:/[\\/]node_modules[\\/]react(.*)?[\\/]/,name:'chunk-react',//文件名称priority:40},// antd单独打包antd:{test:/[\\/]node_modules[\\/]antd[\\/]/,name:'chunk-antd',//文件名称priority:30},// 剩下的node_module单独打包libs:{test:/[\\/]node_modules[\\/]/,name:'chunk-libs',priority:20}}},runtimeChunk:{name:entrypoint => `runtime~${entrypoint.name}.js`},//minimize 是否需要压缩//开发环境不需要压缩，因此直接配置minimize:isProduction即可//webpack会自动忽略 minimizer 的配置项minimize:isProduction,minimizer: [new CssMinimizerWebpackPlugin(),new TerserWebpackPlugin(),new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [["gifsicle", { interlaced: true }],["jpegtran", { progressive: true }],["optipng", { optimizationLevel: 5 }],["svgo",{plugins: ["preset-default","prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical",},},],},],],},},}),]},// webpack解析模块加载选项resolve:{// 自动补全文件扩展名extensions:['.jsx','.js','.json']},devServer:{host:'localhost',port:3001,open:true,hot:true,historyApiFallback:true, //解决前端路由刷新404问题},performance:false,//关闭性能分析，提升打包速度
}

App.js

import React,{Suspense,lazy} from "react";
// import Home from "./pages/Home";
// import About from "./pages/About";
import {Link,Routes,Route} from 'react-router-dom'
import {Button} from 'antd'const Home = lazy(() => import(/* webpackChunkName: 'home' */'./pages/Home'))
const About = lazy(() => import(/* webpackChunkName: 'about' */'./pages/About'))
function App(){return (<><h1>App</h1><Button type="primary">按钮</Button><ul><li><Link to="/home">home</Link></li><li><Link to="/about">about</Link></li></ul><Suspense fallback={<div>Loading...</div>}><Routes><Route path="/home" element={<Home />}></Route><Route path="/about" element={<About />}></Route></Routes></Suspense></>)}
export default App

main.js

import React from 'react'
import ReactDom from 'react-dom/client'
import App from './App'
import {BrowserRouter} from 'react-router-dom'
import 'antd/dist/antd.less'
const root = ReactDom.createRoot(document.getElementById('app'))
root.render(<BrowserRouter><App/></BrowserRouter>
)

.eslintrc.js

module.exports = {extends: ["react-app"], // 继承 react 官方规则parserOptions: {babelOptions: {presets: [// 解决页面报错问题["babel-preset-react-app", false],"babel-preset-react-app/prod",],},},
};

babel.config.js

module.exports = {presets:['react-app'],//使用react的预设
}

package.json

"browserslit": ["last 2 version","> 1%","not dead"],"scripts": {"start": "npm run dev","dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js","build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js"},

关于react的webpack配置，如君还有优化空间或问题，请在评论区讨论或私聊我，共同努力共同进步。
万分感谢

react webpack配置相关推荐

Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
react webpack配置组件路径引用 @与自定义
暴露配置文件: create-react-app 生成的项目看不到 webpack 相关的配置文件,需要先暴露出来,使用如下命令 npm run eject 修改配置文件: webpack.confi ...
react webpack配置 paths.js
'use strict';const path = require('path'); const fs = require('fs'); const getPublicUrlOrPath = requ ...
使用webpack配置react并添加到flask应用
学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发. 首先要明确一个概念:react的文件必须经过编译才能被 ...
修改webpack配置，在react中使用less
LESS是一个CSS预处理器,比如antD就是基于LESS的. 要在react中使用LESS,需要暴露webpack配置并进行修改,同时安装less和less-loader. 当然网上可以找到很多教程 ...
react修改webpack配置，添加别名
第一种方式通过 npm run eject 直接暴露出来react所有的webpack配置文件,暴露出来之后,过程不可逆而且失去了 react-scripts 的统一管理的好处,而且react的w ...
React 不用eject下修改webpack配置实现alisa
使用 customize-cra 和 react-app-rewired 对React项目进行webpack配置的注入 yarn add customize-cra react-app-rewired ...
不暴露 create react app 的webpack配置下，修改webpack配置
使用 react-app-rewired react-app-rewired 传送门安装 react-app-rewired npm install react-app-rewired --save ...
react+webpack项目常用的插件(plugins)
一.HtmlWebpackPlugin使用: npm install html-webpack-plugin --save-dev 解释:这个插件是简化创建生成html(h5)文件用的,如果你引入的文 ...

react webpack配置

react webpack配置

react webpack配置相关推荐

最新文章

热门文章