目录
1. 样式资源打包
????????对于css,less,sass等的使用时，webpack需提前安装相应的loader，并且需要在webpack.config.js中进行相应的配置。如下：
?配置好后在终端输入指令 webpack进行打包即可。初次尝试时出现如下错误提示：
该错误提示表示我们安装的loader版本过高或者配置文件中书写有问题。?
可行版本：?
"css-loader": "^3.6.0",
"less": "^4.1.2",
"less-loader": "^5.0.0",
"style-loader": "^1.3.0"
2.打包html资源
1. 安装? npm i -D html-webpack-plugin@3
2.在webpack.config.js中引入plugin?const HtmlWebpackPlugin = require('html-webpack-plugin');
3. 配置 plugin
?以下红色错误提示为没有指定版本安装时所安装的plugin版本过高造成的模块之间不匹配。
3.打包图片资源
?
?npm i -D url-loader@3 file-loader@4
此时还无法进行对html文件中的img进行打包，还需要加载html-loader才行，配置如下：
npm i -D??html-loader@0.5.5
?综合配置如下：
4.打包其他资源
如字体，这里使用了 iconfont-阿里巴巴矢量图标库,选择需要的图标进行下载代码，然后可以减压到项目目录下，对于图标的使用方式有以下3中：
- Unicode
- Font class
- Symbol
在module/rules下配置
这里的77行有的时候使用的是exclud排除其他文件的形式，这里就需要注意写，不然就会出现如下类似情况：
?接下来按照上面的使用方式正常使用即可。这里简单展示了font-class的用法如下：
?
5.devServer
简单的配置如下：
?遇到的一些错误：
?
这种情况表示目前使用的端口号被占用，使得访问失败，更改端口号即可。?
2.如果出现 当输入npx webpack-dev-server指令后控制台显示成功执行，但是浏览器显示 cannot get/，控制台显示404，此时表示经devServer管理的资源有的不在打包路径下，也就是说devServer找不到资源,即在配置文件中存在书写错误或遗漏导致打包后的文件不在build文件下，此时就会出现这种情况。
例如：output中的路径与devServer中的路径一致
?
或者是一些如图片的静态资源，访问路径要写好，如下图中的outputPath 和 publicPath：?
?
6.开发环境的基本配置
/**
* 使用webpack时一般会先安装webpack 和 webpack-cli ,有时还需安装webpack-dev-server
* webpack.config.js webpack的配置文件
* 作用：指示webpack 干哪些活；
*
* 所有的构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack 配置
// 入口
entry: './src/index.js',
// 出口
output: {
// 输出文件名
filename: 'bundle.js',
// 输出路径
path: resolve(__dirname,'build'),
},
// loader配置
module: {
rules: [
{
test: /\.css$/,
// 使用哪些loader
use: [
// 从下至上执行
// 创建style标签，将js中的样式资源插入至head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
'css-loader',
]
},
{
test: /\.less$/,
use: [
'style-loader', //@1
'css-loader', // @3
'less-loader', // 需安装less@4 less-loader@5
]
},
{
// 默认处理不了html中img标签的图片，所以还得有html-loader
// 处理图片资源
// 需下载: url-loader 和 file-loader
test: /\.(jpg|JPG|png|gif|PNG)$/,
use: [{
loader: 'url-loader',
//loader: 'url-loader?limit=8192&name=imgs/[name].[ext]'
options: {
// 当发现图片大小小于8kb时就会被base64处理，就不会打包到build相应目录下了
// 优点：减少请求数量(减轻服务器压力)
// 缺点：图片体积会更大，请求速度慢
limit: 12 * 1024,
// 因为url-loader默认使用es6模块化进行解析，而html-loader使用commonjs模块化进行解析
// 解析时出现问题： [object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs模块化
esModule: false,
// [hash:10]哈希值前10位
// [ext] 获取文件原有扩展名
name: '[name].[ext]',
outputPath: 'imgs' // 只有尺寸大于limit的才会打包到imgs文件夹下
}
}]
},
{
test: /\.html$/,
// 用来处理html中的图片，
// 负责引入img，使得图片能被url-loader进行处理
loader: 'html-loader',
options: {
name: '[name].[ext]'
}
},
{
// 打包其他资源，除html、css、js以外的资源，如字体图标
test: /\.(eot|ttf|svg|woff)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'icon'
}
}
]
},
// plugin配置
plugins: [
// plugin 使用前需要安装并且引入
// 功能： 默认会创建一个空的index.html文件并打包到build下,其中html文件的标题会改变，
// 会引入打包输出的所有资源（js/css）
// 需求：需要一个有结构的html文件
new HtmlWebpackPlugin({
// 复制./src/index.js文件,并引入打包输出的所有资源（js/css）
template: './src/index.html'
})
],
// 模式 'development' 或者 'production'
mode: 'development',
// 开发服务器devServer：自动编译，自动打包，自动刷新浏览器
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server,这里就要下载 webpack-dev-server
devServer: {
// 1.指定服务的ip
contentBase: resolve(__dirname, 'build'),
compress: true, // 启动gzip压缩
host:'localhost',
port: 8000, // 端口号
// open: true // 自动打开浏览器
}
};7.提取css文件成单独文件
一般在项目打包时css样式代码是包含在js文件中的，而在实际开发中可能需要将css样式文件进行抽离出来，进行单独处理。这样样式的引入方式就会从使用style标签引用的方式改为link标签引入的方式，这样一来就防止了style标签引入样式带来的闪屏现象，而且css文件和js文件分离也会提示整体的解析速度。
想要进行css的提取还需要下载一个插件：mini-css-extract-plugin，配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
filename: 'bundle.js',
path: resolve(__dirname,'build'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
//'style-loader',
// MiniCssExtractPlugin.loader会取代style-loader，
// 作用：提取js中的css成单独样式文件
MiniCssExtractPlugin.loader,
'css-loader',
]
}
]
},
// plugin配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/build.css'
})
],
mode: 'development'
};8.css兼容性处理
这里的安装版本是postcss-loader@3? postcss-preset-env@6
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodejs环境变量
process.env.NODE_ENV = 'development';
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
filename: 'bundle.js',
path: resolve(__dirname,'build'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
//'style-loader',
// MiniCssExtractPlugin.loader会取代style-loader，
// 作用：提取js中的css成单独样式文件
MiniCssExtractPlugin.loader,
'css-loader',
/**
* css兼容性处理：postcss --> 想要一个loader和插件
* postcss-loader postcss-preset-env
* postcss-preset-env这个插件就是帮助postcss找到package.json中browserslist里面的配置，
* 通过配置加载指定的css兼容样式。
* package.json中browserslist里面的简单配置如下
* "browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
不管webpack.config.js中的mode是development还是production，browserslist都会默认执行
"production"里的规则。如果想要browserslist它执行"development"里的规则就需要在webpack.config.js
中进行设置node环境变量：process.env.NODE_ENV = 'development'
*/
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: ()=> [
// postcss插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
// plugin配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/build.css'
})
],
mode: 'development'
};9.压缩css
压缩css文件需要使用一个插件optimize-css-assets-webpack-plugin,这里安装的@5，配置如下：
?主要是图片中的 第5行和74行。
在css文件较大时，压缩后不仅能减小文件大小还能提升请求速度，这样页面渲染也更快。
10.js语法检查eslint
module: {
rules: [
{
/**
* 语法检查：eslint-loader,这个loader依赖于eslint这个库，
* 所以eslint-loader 和 eslint都得安装
* 只检查自己写的源代码，第三方库和别人的代码不用检测(也切记不要去检查)
* 设置检测规则：
* 在package.json中eslintConfig中进行设置
* "eslintConfig": {
"extends": "airbnb-base"
}
* 需下载： npm i -D eslint-loader@3 eslint@6 eslint-config-airbnb-base eslint-
plugin-import
* 详情见于npmjs.org搜索eslint
*/
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint错误
fix: true
}
}, 11.生产环境基本配置
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonCssLoader = [
MiniCssExtractPlugin.loader,// 处理并抽离css
'css-loader',
{
// css兼容性处理
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
];
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [...CommonCssLoader]
},
{
test: /\.less$/,
use: [...CommonCssLoader,'less-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
// 语法检查配置还需在package.json配置"eslintConfig"
enforce: 'pre',// js eslint语法检查要优先于babel兼容性处理
loader: 'eslint-loader',
options: {
// 自动修复eslint检查错误
fix: true
}
},
{
// js兼容性处理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [[
'@babel/preset-env', // 只能做简单兼容性处理
{
// 按需加载
useBuiltIns: 'usage',
corejs: { version:3},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}]
}
]
}
},
{
test: /\.(jpg|jpeg|png|PNG|gif|bmp)$/,
loader: 'url-loader',
options: {
limit: 10 * 1024,
name: '[name].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
// 打包其他资源，会原封不动的输出文件
test: /\.(eot|ttf|svg|woff)$/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
// 将抽离的css注入到打包文件下
filename: 'css/index.css'
}),
new OptimizeCssAssetsWebpackPlugin(),//压缩css
new HtmlWebpackPlugin({
// 引入模板
template: './src/index.html',
// 压缩html
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
/**
* 生产环境搭建小总结：
* 1、输入输出入口
* 2、css样式处理：
* css的抽离提取及重命名
* css的压缩处理及浏览器版本适配设置
* 3、js处理
* js的语法检查
* 浏览器对js的兼容性
* js压缩
* 4、html处理
* 模板以及压缩
* 5、其他文件处理
*/12.webpack优化配置
开发环境性能优化：
? ? ? ? 优化打包构建速度
? ? ? ? ? ? ? ? HMR
? ? ? ? 优化代码调试功能
? ? ? ? ? ? ? ? source-map
生产环境性能优化：
????????优化打包构建速度
? ? ? ? ? ? ? ? oneOf
? ? ? ? ? ? ? ? babel缓存
? ? ? ? ? ? ? ? 多进程打包
????????优化代码运行的性能
? ? ? ? ? ? ? ? 缓存（hash-->chunkhash-->contenthash）
? ? ? ? ? ? ? ? tree-shaking
? ? ? ? ? ? ? ? code split
? ? ? ? ? ? ? ? 懒加载/预加载
? ? ? ? ? ? ? ? PWA
? ? ? ? ? ? ? ? externals
? ? ? ? ? ? ? ? dll
12.1 HMR:??hot module replacement 模块热更新
* HMR: hot module replacement 模块热更新
* 作用：一个模块发生变化，只会重新打包这一个模块(而不是所有模块)
* 极大提升构建速度
* 配置于devServer: {hot: true,// 开启HMR功能}
* 样式文件： 如果使用的是style-loader来处理的样式，就可以使用HMR功能，因为style-loader内部实现了；
* js文件： 默认不能使用HMR功能--> 如果想要js能够使用HMR功能就需要在入口js文件添加js代码
* HMR功能对js的处理只能处理非入口js文件，如果处理入口文件就会造成不必要的打包入口文件的依赖
* html文件： 默认不能使用HMR功能,(也不需要做HMR功能，因为html文件就一个)
* 解决方案：修改webpack.config.js的入口entry,将html文件引进去
* entry: ['./src/index.js', './src/index.html']
*
js文件： 默认不能使用HMR功能--> 如果想要js能够使用HMR功能就需要在入口js文件添加js代码
import './print.js'
if(module.hot) {
// 一旦module.hot为true，说明开启了HMR功能
module.hot.accept('./print.js', function () {
// 该方法会监听print.js文件(目标文件)的变化，一旦监测到就会执行后面的回调函数
// 其他模块就不会重新打包构建，这样一来就省去了没变化文件的重复打包的问题。
print();
});
}
12.2 source-map:? 提高开发效率
/**
* [inline-|hidden-|eval-|nosources-|cheap-|cheap-module-]source-map
*
* source-map: 外部
* 一种提供源代码到构建后的代码的映射技术。
* 功能：(如果构建后的代码出错了，通过映射就可以追踪源代码的错误)
* 能提供错误代码的准确信息和源代码的错误位置
* 如何开启：只需在webpack.config.js中的module.export中添加devtool: 'source-map'即可
* 开启后，打包后就会在打包文件下生成一个.map的文件
*
* inline-source-map: 内联，即map的base64代码嵌入在打包的js文件代码中。
* devtool: 'inline-source-map'
* 能提供错误代码的准确信息和源代码的错误位置
*
* hidden-source-map: 外部
* 会单独的生成一个map文件
* 只会隐藏源代码，会提示构建后的代码
* 能够提示错误代码的原因和构建后代码错误位置，但不会在源代码中提示错误位置也不提示错误
*
* eval-source-map: 内联
* 每一个文件都生成一个map，都在eval中
* 能提供错误代码的准确信息和源代码的错误位置
*
* nosources-source-map: 外部
* 构建后的代码和源代码都会隐藏
* 能提供错误代码的准确信息,但没有任何源代码的错误信息
*
* cheap-source-map: 外部
* 能提供源代码错误信息，只能精确到行
*
* cheap-module-source-map: 外部
* 能提供错误代码的准确信息和源代码的错误位置
* module会将loader的source-map加入进来
*
* 内联和外部的区别： 外部生成了文件，内联没有；内联构建速度更快
*
* 开发环境：要求速度快，调试友好
* 速度快(eval>inline>cheap...)
* eval-cheap-source-map > eval-source-map > ...
* 调试更友好
* source-map > cheap-module-source-map > cheap-source-map > ...
* 综合可选 --> eval-source-map(vue|react脚手架默认配置) | eval-cheap-module-source-map
*
* 生成环境：源代码要不要隐藏？ 调试要不要更好？
* 采用内联的方式会让代码体积变大，所以生产环境不用内联。
* 源代码隐藏：nosources-source-map | hidden-source-map
* 调试更好：source-map
* 综合可选：--> source-map
*/12.3 oneOf:??优化生产环境构建打包速度
module: {
rules: [
{},
{
// 由于不同的文件会有不同的loader来处理，但在匹配loader的过程中可能不止一个loader处理
// 了这个文件，而且配置中的module.rules里面的会从头到尾扫描一遍而造成处理的性能降低。
// 此时可采用oneOf来进行配置，使得一种类型的文件只会有一个loader来处理，从而提高性能。
// 如果必需有2个或者2个以上loader同时处理同一种类型文件时，可以将一部分提取出oneOf放到上面
// 的{}中，因为代码从上至下运行，且oneOf中一旦匹配到合适loader后就不会继续向下匹配了。
oneOf: [
{},
{}
]
}
]
}
比如下：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
// 语法检查配置还需在package.json配置"eslintConfig"
enforce: 'pre',// js eslint语法检查要优先于babel兼容性处理
loader: 'eslint-loader',
options: {
// 自动修复eslint检查错误
fix: true
}
},
{
oneOf: [
{
test: /\.css$/,
use: [...CommonCssLoader]
},
{
test: /\.less$/,
use: [...CommonCssLoader,'less-loader']
},
{
// js兼容性处理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [[
'@babel/preset-env', // 只能做简单兼容性处理
{
// 按需加载
useBuiltIns: 'usage',
corejs: { version:3},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}]
]
}
},
{
test: /\.(jpg|jpeg|png|PNG|gif|bmp)$/,
loader: 'url-loader',
options: {
limit: 10 * 1024,
name: '[name].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
// 打包其他资源，会原封不动的输出文件
test: /\.(eot|ttf|svg|woff)$/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
}12.4 生产环境缓存配置：
主要包括babel缓存和资源缓存。
1.babel缓存：babel是用来处理js文件的（兼容性处理）,缓存后就只对变化的文件进行处理，其他文件从缓存中获取，这样一来不仅可以提升效率也可以让客户端不去下载不需要的资源。使用babel缓存主要是因为生产环境是不会配置HMR功能的，所以需要开启babel缓存功能。
/**
* 1. babel缓存：cacheDirectory: true
* 配置于
* {
// js兼容性处理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [[]],
// 开启babel缓存
// 第二次构建时会读取之前的缓存，提升速度。
cacheDirectory: true
}
}
* 让第二次打包速度更快
* 2. 文件资源缓存：
* hash: 给文件名添加hash值。每次webpack构建时会生成一个唯一的hash值，
* 问题：因为js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效。
* chunkhash: 根据chunk生成hash值，如果打包文件来源于同一个chunk，那么hash值就一样
* 问题：js和css同时使用一个hash值，因为css是在js中被引入的，所以同属于一个chunk
* contenthash: 只要文件内容没变，hash值就不会变
* 让代码上线运行缓存更好使用
*
*
* 配置例如：
* output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/index.[contenthash:10].js'
}
* new MiniCssExtractPlugin({
// 将抽离的css注入到打包文件下
filename: 'css/index.[contenthash:10].css'
}),
*/12.5 tree-shaking:
主要功能：去除应用程序中没有使用的代码，使得代码体积更小。
tree shaking: 去除无用代码
前提：必须使用es6模块化、开启production生产环境
满足前提后即可使用。
在package.json中配置：
"sideEffects": false 表示所有代码都没有副作用即都可以进行tree shaking
问题：可能会把css 或者 @babel/polyfill这些只引入不使用的文件干掉。解决如下：
"sideEffects": ["*.css","*.less"] 表示对[]中的css文件等不进行 tree shaking
12.6 code split: 代码分割
单入口模式-->单页面应用
entry: './src/index.js'
多入口模式-->多页面应用
entry: {
有多少个入口就会输出多少个bundle文件,此时输出可以按文件名输出，如下output
main: './src/index.js',
test: './src/test.js'
}
output: {
filename: 'js/[name].[contenthash:10].js',
path: path.resolve(__dirname, 'build')
}
在webpack.config.js中的module.exports中配置
optimization: {
splitChunks: {
chunks: 'all'
}
}
功能：
1.可以将node_modules中的代码单独打包成一个chunk并最终输出.
2.自动分析多入口的chunk中有没有公共的文件，如果有会打包成单独的一个chunk.
对于多入口模式上面的功能1和功能2只要配置了optimization都会满足，但是对于单入口模式.
就算配置了optimization，也只会满足功能1，如果想要它满足功能2可以使用动态引入模块的方式。
如：import('./xxx.js').then().catch(),此时打包后的文件名会以id和hash值为名，如果改名可以
使用webpack魔法注释：import(/* webpackChunkName: 'xxx' */'./xxx.js').then().catch()
有点像路由懒加载
12.7 懒加载和预加载：
lazy-loading: js 文件懒加载
懒加载：文件需要使用时才加载。
预加载：prefetch，会在使用之前加载js文件。对浏览器要求高。
正常加载可以认为是并行加载。
预加载：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
import(/* webpackChunkName: 'xxxnaem',
webpackPrefetch: true */'./xxxname.js').then().catch()12.8 PWA:
PWA：渐进式网络开发程序
可以使得网页在离线时也可以访问。
需要使用一个插件：workbox-webpack-plugin
使用：
1.在webpack.config.js中引入这个插件
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
2.在plugins中调用这个插件：
new WorkboxWebpackPlugin.GenerateSW({
// 功能1：帮助serviceworker快速启动。
// 功能2：删除旧的serviceworker
// 最终会生成一个serviceworker配置文件
clientsClaim: true,
skipWaiting: true
})
3.注册serviceworker：
如下：
注册serviceworker：
注册代码：编写在入口js文件中
if('serviceWorker' in navigator) {
window.addEventListener('load',()=>{
navigator.serviceWorker.register('/service-worker.js')
.then(()=>{
console.log('sw注册成功了');
})
.catch(()=>{
console.log('sw注册失败');
});
})
}
注意1.由于eslint不认识 浏览器中的window、navigator等全局变量
解决：需要修改package.json中eslintConfig的配置，如下：
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true, // 支持浏览器全局变量
//"node": true, // 支持node全局变量,需要则可加上
}
}
注意2. serviceWorker代码必须运行在服务器上，即构建后的build需用服务器启动；
--> nodejs
npm i -g serve // serve能够快速创建一个静态资源服务器
serve -s build // 启动服务器，将build目录下的所有资源作为静态资源暴露出去12.9 多进程打包：
多进程打包：使用之前得下载一个loader：thread-loader
开启多进程打包有利有弊：
因进程启动大概需要600ms，进程通信也有开销；
只有工作消耗时间比较长，才需要多进程打包。
配置：和babel-loader一起使用，先babel后thread，
此时有多个loader一起使用，需要使用use: [{loader1},{loader2}]12.10 webpack--externals
在开发中如果有使用cdn引入得文件，可以使用externals来防止这个文件打包，
因为此时不需要它打包。可以减轻打包文件体积和构建速度。
配置：在webpack.config.js中的module.exports中添加如下代码：
externals：{
// 忽略的库名或者包名
如：
jquery: 'jQuery'
}本次笔记的package.json:
??{
"name": "mysnabbdom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.3",
"core-js": "^3.21.1",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-loader": "^3.0.4",
"eslint-plugin-import": "^2.25.4",
"file-loader": "^4.3.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"less": "^4.1.2",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.8",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.1",
"snabbdom": "^3.3.1",
"style-loader": "^1.3.0",
"url-loader": "^3.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3",
"workbox-webpack-plugin": "^5.1.4"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
}
}