React项目中webpack的配置过程
初始化一个web项目
使用npm init -y 初始化一个项目
在项目目录下创建src, dist文件夹，创建webpack.config.js配置文件
然后在src文件夹下创建index.js, index.html文件
然后安装依赖包
npm i jquery -S 安装jQuery包
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D 安装开发调试包
安装loader调试工具
yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --dev
安装babel预编译工具, babel-loader@7需要添加版本号，否则可能导致babel-loader与babel-core版本不兼容问题
yarn add babel-loader@7 babel-core babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 babel-preset-react --dev
安装项目工具和UI库
yarn add react react-dom react-router-dom@4.2.2 antd@5.10.1
编写index.js脚本文件
import $ from 'jquery'
$(function () {
$('li:odd').css('backgroundColor','pink')
$('li:even').css('backgroundColor','lightblue')
})
在index.html中导入index.js脚本文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js"></script>
</head>
编写webpack.config.js配置文件
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
//项目的入口与出口设置
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [ //插件
//在内存中生成一个页面，默认在项目的根目录下的内存中
new htmlWebpackPlugin({
//页面模板
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
]
}
在package.json项目配置中添加短命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// --cacheBase: 指定托管目录， 如果没指定默认在项目内存的根目录下
"dev": "webpack-dev-server --open --port 3000 --hot"
},
执行npm run dev 进行打包调试
添加调试工具
添加loader加载器和babel预编译工具
添加loader加载器，让webpack处理js模块外的其他模块。
webpack默认只能打包处理以.js结尾的模块。其他非.js后缀名结尾的模块，webpack默认是不处理的。
需要调用loader加载器才可以正常打包，loader加载器的作用：协作webpack打包处理约定的文件模块。比如：css-loader: 可以打包处理.css相关的文件。
使用scss设置css样式，需要使用css-loader解析器进行解析
npm i style-loader css-loader sass-loader node-sass url-loader file-loader -D
js中es6高级语法解析
npm i babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D
在webpack.config.js中添加loader加载器配置
module: {
rules: [
{ test: /\.css$/, use:['style-loader', 'css-loader'] },
{ test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=500000' },
{ test: /\.js$/, use:'babel-loader', exclude: /node_modules/ },
]
}
开发完成，打包发布
新建发布配置文件webpack.pub.config.js
修改它的产物名称配置文件
module: {
rules: [
{ test: /\.css$/, use:['style-loader', 'css-loader'] },
{ test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000&name=[hash:8]-[name].[ext]' },
{ test: /\.js$/, use:'babel-loader', exclude: /node_modules/ },
]
}
在package.json配置文件中，添加短命令pub，并在webpack命令中添加使用的配置文件名参数
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"--cacheBase": "指定托管目录， 如果没指定默认在项目内存的根目录下",
"dev": "webpack-dev-server --open --port 3000 --hot",
"pub": "webpack --config webpack.pub.config.js"
},
调用指令npm run pub， 打包出资源bundle.js， 图片， index.html。
zhoufeideMacBook-Pro-2:webpack zhoufei$ npm run pub > webpack@1.0.0 pub
> webpack --config webpack.pub.config.js assets by path *.jpg 61.5 KiB
asset 56e2b290-phone1.jpg 61.5 KiB [emitted] [immutable] [from: src/images/phone1.jpg] (auxiliary name: main)
asset 7a417220207de157cf21.jpg 63 bytes [emitted] [immutable] [from: src/images/phone1.jpg] (auxiliary name: main)
asset bundle.js 344 KiB [emitted] (name: main)
asset index.html 660 bytes [emitted]
webpack编译器优化
1.产物图片优化
把项目中的所有图片在产物中放到一个images文件夹下面
通过修改webpack.pub.config.js中的module.rules项
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]' },
2.产物目录dist重建优化
每次生成产物时，都对dist目录进行先清理，再生成
npm i clean-webpack-plugin -D webpack.pub.config.js中进行配置清理插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ //插件
/*
每次构建产物都要重新创建dist目录保存产物
*/
new CleanWebpackPlugin({cleanAfterEveryBuildPatterns:['dist']})
],
3.抽离第三方包
发布思路：bundle.js中只存放自己的代码，第三方包的代码都抽离到另外的JS包中
webpack@4以后的版本，弃用了许多@3的插件，其中包括：
分离打包js文件的插件 webpack.optimize.CommonChunkPlugin()；
压缩js文件的插件 webpack.optimize.UglifyJsPlugin();
定义产品上线环境webpack.optimize.DedupePlugun()；
分离css文件插件extract-text-webpack-plugin();
css文件压缩插件 CssMinimizerPlugin()；
webpack3的抽离方法
在webpack.pub.config.js中修改entry的设置为如下：
//app和vendors的key名称都是自己自定义的，随便取的
entry: {
app: path.join(__dirname, './src/index.js'),
vendors: ['jquery'] //把要抽离的第三方包放到这个数组中
}, 在pulgins的数组中添加抽离设置
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', //指定抽离的入口
filename: 'vendors.js' //抽离的所有第三方包的结果包名称。
}) 然后将js文件放到一个统一的目录下：
output: {
path: path.join(__dirname, './dist'),
filename: 'js/bundle.js'
},
4.压缩js代码
在webpack.pub.config.js中的 plugins项目下，添加下面的js优化代码
js代码压缩优化
new webpack.optimize.UglifyJsPlugin({
compress: { //配置压缩项
warnings: false //移除警告
}
}),
new webpack.optimize.DedupePlugin({
'process.env.NODE_ENV': '"production"'
})
5.压缩html代码
在htmlWebpackPlugin模板中添加html优化配置
new htmlWebpackPlugin({
//页面模板
template: path.join(__dirname, './src/index.html'),
filename: 'index.html',
minify: {
collapseWhitespace: true, //合并多余的空格
removeComments: true, // 移除注释
removeAttributeQuotes: true //移除属性上的双引号
}
}),
6.从bundle.js中抽离css单独存放
yarn add extract-text-webpack-plugin --dev
修改webpack.pub.config.js文件 const ExtractTextPlugin = require('extract-text-webpack-plugin')
添加插件
plugins: [ //插件 //配置提取出来的css名称
new ExtractTextPlugin({
filename: 'style/[name].min.css'
})
],
修改css-loader的rules
module: {
rules: [
{ test: /\.css$/, use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
publicPath: '../' //指定抽离的时候，自动为我们使用的路径加上 ../前缀
}) },
{ test: /\.scss$/, use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '../' //指定抽离的时候，自动为我们使用的路径加上 ../前缀
}) },
]
}
7.压缩css
yarn add optimize-css-assets-webpack-plugin --dev
修改webpack.pub.config.js文件 // 压缩css插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') plugins: [ //插件
/*
压缩css
*/
new OptimizeCssAssetsPlugin()
],
webpack项目模板
dev的webpack开发模板
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { name } = require('file-loader')
module.exports = {
mode: 'development',
//项目的入口与出口设置
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [ //插件
//在内存中生成一个页面，默认在项目的根目录下的内存中
/*
html-webpack-plugin的作用有2个：
1.自动将./src/index.html页面复制一份到项目根目录，放到了内存中。
2.在内存中自动生成的index.html页面里，自动注入webpack打包的存在于内存中的bundle.js文件
*/
new htmlWebpackPlugin({
//页面模板
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
/*
webpack默认只能打包处理以.js结尾的模块。其他非.js后缀名结尾的模块，webpack默认是不处理的。
需要调用loader加载器才可以正常打包，loader加载器的作用：协作webpack打包处理约定的文件模块。比如：css-loader: 可以打包处理.css相关的文件。
*/
module: {
rules: [
{ test: /\.css$/, use:['style-loader', 'css-loader'] },
//声明css模块化，使用CSS模块化解决多个css的作用域都是全局作用域，导致结果互相覆盖的情况
//一般第三方库的样式文件是以css结尾的，所以不能直接对css开启模块化，会影响其他第三方库的展示，这里只对scss进行开启模块化
// { test: /\.css$/, use:['style-loader', {
// loader: 'css-loader',
// options: {
// importLoaders: 1,
// modules: true,
// //自定义css模块化后的class名称
// // localIdentName: [name]-[local]-[hash:5]
// }
// }] },
{ test: /\.scss$/, use:['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
//自定义css模块化后的class名称
// localIdentName: [name]-[local]-[hash:5]
}
}, 'sass-loader'] },
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=500000' },
{ test: /\.jsx?$/, use:'babel-loader', exclude: /node_modules/ },
]
}
}
pub的webpack发布模板
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
//导入每次删除文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack')
// 抽取Css插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 压缩css插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
mode: 'production',
//项目的入口与出口设置
entry: path.join(__dirname, './src/index.js'),
//app和vendors的key名称都是自己自定义的，随便取的
// entry: {
// app: path.join(__dirname, './src/index.js'),
// vendors: ['jquery'] //把要抽离的第三方包放到这个数组中
// },
output: {
path: path.join(__dirname, './dist'),
filename: 'js/bundle.js'
},
plugins: [ //插件
//在内存中生成一个页面，默认在项目的根目录下的内存中
/*
html-webpack-plugin的作用有2个：
1.自动将./src/index.html页面复制一份到项目根目录，放到了内存中。
2.在内存中自动生成的index.html页面里，自动注入webpack打包的存在于内存中的bundle.js文件
*/
new htmlWebpackPlugin({
//页面模板
template: path.join(__dirname, './src/index.html'),
filename: 'index.html',
minify: {
collapseWhitespace: true, //合并多余的空格
removeComments: true, // 移除注释
removeAttributeQuotes: true //移除属性上的双引号
}
}),
/*
每次构建产物都要重新创建dist目录保存产物
*/
new CleanWebpackPlugin({cleanAfterEveryBuildPatterns:['dist']}),
new OptimizeCssAssetsPlugin()
/*
编译优化：抽离第三方包名称
webpack3的在plugins数组中添加new webpack.optimize.CommonsChunkPlugin配置方式已经废弃，要在下面的方法进行实现
webpack3实现方法
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', //指定抽离的入口
filename: 'vendors.js' //抽离的所有第三方包的结果包名称。
})
webpack5设置无效，先注释
*/
/*
编译优化：js代码压缩优化
new webpack.optimize.UglifyJsPlugin({
compress: { //配置压缩项
warnings: false //移除警告
}
}),
new webpack.optimize.DedupePlugin({
'process.env.NODE_ENV': '"production"'
})
*/
/*
编译优化：抽离css
//配置提取出来的css名称
new ExtractTextPlugin({
filename: 'style/[name].min.css'
})
*/
],
// webpack V5替代webpack V3的解决方案
// optimization: {
// splitChunks: {
// cacheGroups: {
// commons: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendors',
// chunks: 'all',
// },
// }
// }
// },
/*
webpack默认只能打包处理以.js结尾的模块。其他非.js后缀名结尾的模块，webpack默认是不处理的。
需要调用loader加载器才可以正常打包，loader加载器的作用：协作webpack打包处理约定的文件模块。比如：css-loader: 可以打包处理.css相关的文件。
产物图片优化：
把项目中的所有图片在产物中放到一个images文件夹下面
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]' },
*/
module: {
rules: [
{ test: /\.css$/, use:['style-loader', 'css-loader'] },
//声明css模块化，使用CSS模块化解决多个css的作用域都是全局作用域，导致结果互相覆盖的情况
//一般第三方库的样式文件是以css结尾的，所以不能直接对css开启模块化，会影响其他第三方库的展示，这里只对scss进行开启模块化
// { test: /\.css$/, use:['style-loader', {
// loader: 'css-loader',
// options: {
// importLoaders: 1,
// modules: true,
// //自定义css模块化后的class名称
// // localIdentName: [name]-[local]-[hash:5]
// }
// }] },
{ test: /\.scss$/, use:['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
//自定义css模块化后的class名称
// localIdentName: [name]-[local]-[hash:5]
}
}, 'sass-loader'] },
{ test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=500000' },
{ test: /\.jsx?$/, use:'babel-loader', exclude: /node_modules/ },
]
}
}
对应package.json依赖关系和scripts短命令
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"--cacheBase": "指定托管目录， 如果没指定默认在项目内存的根目录下",
"dev": "webpack-dev-server --open --port 3000 --hot",
"pub": "webpack --config webpack.pub.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.8.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3",
"node-sass": "^9.0.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"url-loader": "^4.1.1",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
"antd": "^5.10.1",
"jquery": "^3.7.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "4.2.2"
}
}
.babelrc模板
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
React项目中webpack的配置过程的更多相关文章
- react项目中的一些配置
react中事件优化使用babel插件 npm install babel-plugin-react-scope-binding --save-dev react中绝对路径引入文件:在根目录下增加js ...
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- 深入浅出TypeScript（5）- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- react项目中使用less并修改antd主题样式
一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...
- React项目中使用less/scss&全局样式/变量
使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app c ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- React项目中使用Mobx状态管理（二）
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
随机推荐
- ASP.NET Core 6框架揭秘实例演示[41]：跨域资源的共享（CORS）花式用法
同源策略是所有浏览器都必须遵循的一项安全原则,它的存在决定了浏览器在默认情况下无法对跨域请求的资源做进一步处理.为了实现跨域资源的共享,W3C制定了CORS规范.ASP.NET利用CorsMiddle ...
- Prometheus-3：一文详解promQL
读前提示: 本文字数较多且紧凑,最好预留15min一次性看完,好营养,易吸收. promQL详解 Prometheus提供了内置的数据查询语言PromQL(全称为Prometheus Query La ...
- gowWeb之错误处理和返回响应
Go Web开发进阶实战(gin框架) 讲师:李文周老师 https://study.163.com/course/introduction.htm?courseId=1210171207&t ...
- [数据分析与可视化] 基于plottable库绘制精美表格
plottable是一个Python库,用于在matplotlib中绘制精美定制的图形表格.plottable的官方仓库地址为:plottable.本文主要参考其官方文档,plottable的官方文档 ...
- Centos7 安装部署 Kubernetes(k8s) 高可用集群
目录 一.系统环境 二.前言 三.Kubernetes(k8s)高可用简介 四.配置机器基本环境 五.部署haproxy负载均衡器 六.部署etcd集群 七.部署Kubernetes(k8s) mas ...
- DateTime和DateTimeOffset是同胞兄弟吗？
小编在日常开发中,用得最多的时间类型就是DateTime,直到一次偶然的邂逅,让小编遇见了DateTimeOffset.当时小编也是一脸迷茫,因为在小编的C#编程字典里就没出现过DateTimeOff ...
- vue项目node_modules文件过大问题
node_modules目录下.cache下最大文件删除即可(vue-loader)
- node：spawn npm ENOENT
错误背景 封装脚手架时报错 错误原因 windows系统原因 解决方案 const createProjectAction = async (project) => { console.log( ...
- 无linux基础也能熟练掌握git的基本操作
git是一个用来管理项目的工具,它的远程仓库有github.gitee.gitlab代码托管中心,既可以用于个人共享代码,又可以用于团队进行项目的协作与发布,那么我们一起来了解一下git该如何使用~ ...
- 记录一次解决数据库连接池连接泄露BUG
1 BUG现象 系统并发请求,系统停滞无法使用,所有接口都是无法与后端进行交互的状态,系统并没有宕机 2 BUG的业务流程 插入分数方法 涉及插入表ABCD 加了声明式事务 查询分数方法 涉及表ABC ...