基础配置

  1. const { resolve } = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.   mode: 'development',
  6.   entry: './src/index.js',
  7.   // 绝对路径
  8.   output: {
  9.     // 对应主入口的输出文件名
  10.     filename: 'js/[name].[hash:8].bundle.js',
  11.     // 文件输出路径
  12.     path: resolve(__dirname, 'build'),
  13.   },
  14.   // loader
  15.   module: {
  16.     rules: [
  17.       {
  18.         test: /\.css$/,
  19.         use: [
  20.           // 创建style标签，将样式插入
  21.           'style-loader',
  22.           // 将css文件转成commonjs文件加载到js中，内容是字符串
  23.           'css-loader',
  24.         ],
  25.       },
  26.       {
  27.         test: /\.less$/,
  28.         use: ['style-loader', 'css-loader', 'less-loader'],
  29.       },
  30.       {
  31.         // url-loader 的问题：处理样式中的图片，无法处理html中的img路径
  32.         test: /\.(png|jpe?g|gif|webp)$/i,
  33.         // 需要下载 url-load 和 file-loader ， url-loader 依赖 file-load
  34.         // ⚠️：只使用一个loader时候，用loader: 'xxx', use: [{loader: 'xxx'}] 或者 use: ['xxx']
  35.         loader: 'url-loader',
  36.         options: {
  37.           // 20k 以下的，转成 base64
  38.           limit: 20 * 1024,
  39.           // 问题：url-loader 默认使用 es6 模块化，而 html-loader 引入图片使用 commonjs
  40.           // 解决：关闭url-loader的es6模块化，使用 commonjs 解析
  41.           esModule: false,
  42.           // 重命名
  43.           name: '[hash:8].[ext]',
  44.           outputPath: 'imgs',
  45.         },
  46.       },
  47.       {
  48.         // html-loader 不是打包html，而是对html中img的相对路径进行处理，配合 url-loader 使用
  49.         // html-loader 负责引入 img，从而能被 url-loader 处理
  50.         test: /\.html$/,
  51.         loader: 'html-loader',
  52.       },
  53.       {
  54.         // 其他静态资源，复制
  55.         // exclude 排除这些文件
  56.         exclude: /\.(css|html|js|less|sass|jpe?g|gif|png|webp)$/,
  57.         loader: 'file-loader',
  58.         options: {
  59.           name: '[hash:10].[ext]',
  60.           outputPath: 'public',
  61.         },
  62.       },
  63.     ],
  64.   },
  65.   // 插件
  66.   plugins: [
  67.     // 默认创建一个空的html，自动引入打包输出的所有资源(css/js)
  68.     new HtmlWebpackPlugin({
  69.       // 配置自定义的html模板
  70.       template: './src/index.html',
  71.     }),
  72.   ],
  74.   // 开发服务器，需要安装 webpack-dev-server，不会产生任何输出，只在内存中编译打包
  75.   // 启动指令：npx webpack-dev-server
  76.   devServer: {
  77.     // 项目构建后路径
  78.     contentBase: resolve(__dirname, 'build'),
  79.     // 开启gzip压缩
  80.     compress: true,
  81.     port: 3333,
  82.     // 自动打开浏览器
  83.     open: true,
  84.     // 启动热更新
  85.     // 默认只对 css 的热更新有作用（style-loader 处理），要想支持 js 热更新，需要在入口文件处监听 module.hot， 下面有详细说明
  86.     hot: true,
  87.   },
  88. };


eslint 配置

  1. ... 
  2. module: {
  3.     rules: [
  4.       /* 
  5.         语法检查 eslint eslint-loader
  6.         设置检查规则：
  7.           package.json 中的 eslintConfig 设置或者 .eslintrc.js 设置
  8.           "eslintConfig": {
  9.             "extends": "aribnb-base",
  10.             "env": {
  11.                 "browser": true, // 指明环境为浏览器
  12.             }
  13.           }
  15.           要使用 airbnb , 需要安装 eslint eslint-config-airbnb-base eslint-plugin-import
  16.       */
  17.       {
  18.         test: /\.js$/,
  19.         exclude: /node_modules/,
  20.         loader: 'eslint-loader',
  21.         options: {
  22.           fix: true,
  23.         },
  24.       },
  25.     ],
  26.   },
  27. ...

js 兼容性处理

  1.  module: {
  2.     rules: [
  3.       /* 
  4.         js 兼容性处理
  5.           1.基本兼容性处理：@babel/preset-env ，
  6.             问题：只能处理基础的语法(箭头函数)， promise 没法转
  7.           2.全部的兼容性处理：@babel/polyfill 不需要配置，直接在入口文件处引入就行
  8.             问题：所有的兼容性代码都引入了，体积太大了～
  9.           3.按需加载，core-js, 需要进行额外的配置
  11.           @babel/polyfill 和 core-js 只能二选一
  12.       */
  13.       {
  14.         test: /\.js$/,
  15.         loader: 'babel-loader',
  16.         options: {
  17.           presets: [
  18.             [
  19.               '@babel/preset-env',
  20.               {
  21.                 // 按需加载
  22.                 useBuiltIns: 'usage',
  23.                 // 指定 core-js 版本
  24.                 corejs: {
  25.                   version: '3',
  26.                 },
  27.                 // 指定兼容性做到那个版本的浏览器
  28.                 targets: {
  29.                   chrome: '60',
  30.                   firefox: '60',
  31.                   safari: '34',
  32.                   ie: '9',
  33.                   edge: '17',
  34.                 },
  35.               },
  36.              ],
  37.           ],
  38.         },
  39.       },
  40.     ],
  41.   },

js 压缩 & html 压缩

  1. * 通过指定 mode 为 production 即可自动开启 js 压缩
  3. plugins: [
  4.     new HtmlWebpackPlugin({
  5.       template: './src/index.html',
  6.     // 压缩 html
  7.     minify: {
  8.         // 移除空格
  9.       collapseWhitespace: true,
  10.       // 移除注释
  11.       removeComments: true
  12.     }
  13.   })
  14. ]

css module

  1. const commonCssLoader = [
  3. ];
  5. {
  6.   test: /\.less$/,
  7.     use: [
  8.       // 将css从js中提取成单独的文件
  9.       MiniCssExtractPlugin.loader,
  10.       'css-loader',
  11.       {
  12.         loader: 'postcss-loader',
  13.         options: {
  14.              modules: true
  15.         },
  16.           },
  17.       'less-loader'
  18.     ],
  19. },

生产环境配置(部分)

  1. // mimi-css-extract-plugin 将css抽出成单独的文件
  2. // optimize-css-assets-webpack-plugin 压缩css
  3. const { resolve } = require('path');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
  8. process.env.NODE_ENV = 'development';
  10. module.exports = {
  11.   mode: 'development',
  12.   entry: './src/index.js',
  13.   output: {
  14.     filename: 'js/bundle.[hash:8].js',
  15.     path: resolve(__dirname, 'build'),
  16.   },
  17.   module: {
  18.     rules: [
  19.       {
  20.         test: /\.css$/,
  21.         use: [
  22.           // MiniCssExtractPlugin.loader 替代 style-loader
  23.           // style-loader 用于将js里面的css抽离，并以style标签的形式插入html
  24.           // MiniCssExtractPlugin.loader 用于将js里面的css抽离成单独的文件
  25.           MiniCssExtractPlugin.loader,
  26.           // 将css打包进js里面
  27.           'css-loader',
  28.           // css 兼容性处理，postcss --> 需要安装 postcss-loader & postcss-preset-env
  29.           /* 
  30.             postcss-preset-env 帮助 postcss 找到 package.json 里面的 browserslist 配置，根据这个配置加载制定的css兼容样式
  32.             "browserslist": {
  33.               // 要指定 postcss 的开发环境，需要设置node环境变量，process.env.NODE_ENV = 'development'
  34.               "development": [
  35.                 "last 1 chrome version",
  36.                 "last 1 firefox version",
  37.                 "last 1 safari version"
  38.               ],
  39.               // postcss 处理默认是生产环境，与配置的 mode 无关
  40.               "production": [
  41.                 ">0.2%",
  42.                 "not dead",
  43.                 "not op_mini all"
  44.               ]
  45.             }
  46.           */
  47.           {
  48.             // 下面的插件使用不生效。。我去，可能是 webpack 版本不兼容的问题
  49.             loader: 'postcss-loader',
  50.             // options: {
  51.             //   // 固定写法
  52.             //   ident: 'postcss',
  53.             //   plugins: [require('postcss-preset-env')()],
  54.             // },
  55.           },
  56.         ],
  57.       },
  58.       {
  59.         test: /\.less$/,
  60.         use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
  61.       },
  62.     ],
  63.   },
  64.   plugins: [
  65.     new HtmlWebpackPlugin({
  66.       template: './src/index.html',
  67.     }),
  68.     // 将css抽离成单独的文件，需要将 style-loader 更换为 MiniCssExtractPlugin.loader
  69.     new MiniCssExtractPlugin({
  70.       // 对输出的css文件进行重命名
  71.       filename: 'css/[name].[hash:8].css',
  72.     }),
  73.     // 压缩css
  74.     new OptimizeCssAssetsWebpackPlugin(),
  75.   ],
  76. };

全 生产环境配置

  1. // 生产环境配置
  2. const { resolve } = require('path');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  7. process.env.NODE_ENV = 'production';
  9. const commonCssLoader = [
  10.   // 将css从js中提取成单独的文件
  11.   MiniCssExtractPlugin.loader,
  12.   'css-loader',
  13.   {
  14.     loader: 'postcss-loader',
  15.     options: {
  16.       // ⚠️：自己尝试了，这个写法会抱错，webpack版本 5.42.0
  17.       ident: 'postcss',
  18.       // 需要指定 process.env.NODE_ENV, 到 package.json 里面找 browserslist 对应的
  19.       plugins: () => [
  20.         require('postcss-preset-env')(),
  21.       ],
  22.     },
  23.   },
  24. ];
  26. module.exports = {
  27.   mode: 'production',
  28.   entry: './src/index.js',
  29.   output: {
  30.     // 对应主入口的输出文件名
  31.     filename: 'js/[name].[hash:8].bundle.js',
  32.     // 文件输出路径
  33.     path: resolve(__dirname, 'build'),
  34.   },
  35.   module: {
  36.     rules: [
  37.       {
  38.         test: /\.css$/,
  39.         use: [...commonCssLoader],
  40.       },
  41.       {
  42.         test: /\.less$/,
  43.         use: [...commonCssLoader, 'less-loader'],
  44.       },
  45.       /* 
  46.          对同一个文件，既要执行 eslint 又要执行 兼容性处理
  47.          eslint 必须要先执行，可以设置 enforce: 'pre'
  48.       */
  49.       {
  50.         // js 语法检查，配合 package.json 中的 eslintConfig 或者 .eslintrc.js 使用
  51.         test: /\.js$/,
  52.         loader: 'eslint-loader',
  53.         exclude: /node_modules/,
  54.         // 优先执行
  55.         enforce: 'pre',
  56.         options: {
  57.           fix: true,
  58.         },
  59.       },
  60.       {
  61.         test: /\.js$/,
  62.         exclude: /node_modules/,
  63.         loader: 'babel-loader',
  64.         options: {
  65.           presets: [
  66.             [
  67.               // @babel/preset-env的polyfill使用usage形式（不了解的可以查看官方文档），意思是以项目设置的target环境为前提，根据项目中使用到的api功能进行polyfill
  68.               '@babel/preset-env',
  69.               {
  70.                 useBuiltIns: 'usage',
  71.                 corejs: {
  72.                   version: '3',
  73.                 },
  74.                 targets: {
  75.                   chrome: '60',
  76.                   firefox: '50',
  77.                   safari: '40',
  78.                   ie: '9',
  79.                   edge: '16',
  80.                 },
  81.               },
  82.             ],
  83.           ],
  84.         },
  85.       },
  86.       {
  87.         test: /\.(png|jpe?g|gif)$/,
  88.         loader: 'url-loader',
  89.         options: {
  90.           limit: 8 * 1024,
  91.           // 输出路径
  92.           outputPath: 'imgs',
  93.           name: '[hash:10].[ext]',
  94.           // 配合 html-loader 处理图片src的路径问题
  95.           esModule: false,
  96.         },
  97.       },
  98.       {
  99.         // 处理 html 里图片src路径的问题
  100.         test: /\.html$/,
  101.         loader: 'html-loader',
  102.       },
  103.       {
  104.         // 其他文件，原样复制
  105.         exclude: /\.(png|jpe?g|gif|js|css|less|html)$/,
  106.         loader: 'file-loader',
  107.         options: {
  108.           // 输出路径
  109.           outputPath: 'media',
  110.         },
  111.       },
  112.     ],
  113.   },
  114.   plugins: [
  115.     // 将css抽取成单独的文件
  116.     new MiniCssExtractPlugin({
  117.       filename: 'css/[name].[hash:8].css',
  118.     }),
  119.     // css 压缩
  120.     new OptimizeCssAssetsWebpackPlugin(),
  121.     new HtmlWebpackPlugin({
  122.       template: './src/index.html',
  123.       minify: {
  124.         // 移除空格
  125.         collapseWhitespace: true,
  126.         // 移除注释
  127.         removeComments: true,
  128.       },
  129.     }),
  130.   ],
  131. };

webpack 性能优化

开发环境性能优化

优化打包构建速度
优化开发调试

生产环境性能优化

优化打包构建速度
优化代码的运行性能

HMR

  1. HMR: Hot Module Replace 模块热替换
  2. 作用：一个模块发生改变，只重新打包这一个模块，而不是打包所有模块，提升构建速度
  4. css: 可以使用HMR，style-loader 内部实现了
  5. js: 默认不能使用HMR，只能处理非入口的热更新
  6.     解决：入口文件处监听文件变化执行回调
  7.         if (module.hot) {
  8.         module.hot.accept('./print', () => {
  9.           // ./print 发生变化，其他模块不会重新打包构建
  10.           print();
  11.         });
  12.       }
  13. html:  不能使用HMR，html 热更新，需要修改 entry为 ['./src/index.js', './src/index.html']
  1. // ./src/index.js
  3. // js 热更新
  4. if (module.hot) {
  5.   module.hot.accept('./xxxModule', () => {
  6.     // ./print 发生变化，其他模块不会重新打包构建
  7.     print();
  8.   });
  9. }

sourcemap

  1. // 可选择的配置
  2. // [inline-|eval-|hidden-][nosources-][cheap-[module-]]-source-map
  4. [内联] 构建速度更快
  6. 1. source-map [外部]
  7.     错误代码准确信息；源代码错误位置
  9. 2. inline-source-map [内联]
  10.     生成的sourcemap信息，内联在bundle.js中
  11.     错误代码准确信息；源代码错误位置
  13. 3. hidden-source-map [外部]
  14.     错误代码准确信息，没有源代码的错误位置；
  15.   隐藏源代码✅(隐藏源代码，显示构建后代码错误信息)
  17. 4. eval-source-map [内联]
  18.     生成的sourcemap信息，内联在eval函数中
  19.     错误代码准确信息；源代码错误位置
  21. 5. nosources-source-map [外部]
  22.     错误代码准确信息；源代码错误位置；没有任何源代码信息；
  23.   隐藏源代码✅(全部隐藏)
  25. 6. cheap-source-map [外部]
  26.     错误代码准确信息；源代码错误位置；没有列信息，构建较快；
  28. 7. cheap-module-source-map
  29.     同 6
  30.     区别：module 会将 loader 的source-map加入
  33. 开发和生产如何选择？
  35. 速度： eval > inline > cheap > ...
  36. 调试信息： source-map > cheap-module-source-map > cheap-source-map
  38. 隐藏源代码：nosources-source-map 或者 hidden-source-map
  39. 生产环境不选择内联的source-map，体积非常大
  41. 综合： 
  42.     开发环境选择 eval-cheap-module-source-map 或者 eval-source-map(react、vue 用的都是这种)
  43.     生产环境选择 
  44.       隐藏源代码：nosources-source-map 或者 hidden-source-map
  45.         不隐藏，用来错误调试：source-map 或者 cheap-module-source-map

oneOf

  1. ...
  2. module: {
  3.     rules: [
  4.       {
  5.       test: /\.js$/,
  6.       loader: 'eslint-loader',
  7.       exclude: /node_modules/,
  8.       enforce: 'pre',
  9.       options: {
  10.         fix: true,
  11.       },
  12.     },
  13.     // oneOf 里面的loader，只会匹配一个，不能有两个配置处理同一个类型的文件
  14.     oneOf: [
  15.         {
  16.         test: /\.css$/,
  17.         use: ['xxx'],
  18.       },
  19.       {
  20.         test: /\.less$/,
  21.         use: ['xxx'],
  22.       },
  23.       {
  24.         test: /\.js$/,
  25.         loader: 'babel-loader',
  26.         exclude: /node_modules/,
  27.         options: {
  28.           presets: [
  29.             [
  30.               '@babel/preset-env',
  31.               {
  32.                 useBuiltIns: 'usage',
  33.                 corejs: {
  34.                   version: '3',
  35.                 },
  36.                 targets: {
  37.                   chrome: '60',
  38.                   ie: '9',
  39.                   safari: '40',
  40.                   firefox: '70',
  41.                 },
  42.               },
  43.             ],
  44.           ],
  45.         },
  46.       },
  47.             ...
  48.       ]
  49.   ]
  50. }
  51. ...


缓存

  1. 1. babel 缓存，cacheDirectory: true，让第二次打包构建速度更快
  2. 2. 文件资源缓存，利用hash
  3.     三种：
  4.     - hash， 每次构建都会生成一个唯一的hash，js 和 css 使用同一个hash
  5.         问题：重新打包会导致所有的缓存失效，可能只改了一个文件，所有的文件都得重新打包
  7.     - chunkhash，根据chunk生成hash，如果打包来源于同一个chunk，hash就一样
  8.         问题：css是从js从抽离出来的，属于同一个hash，生成的chunkhash一样
  10.     - contenthash，根据文件内容生成hash，文件改变生成的contenthash就改变
  11.         --> 让代码上线运行缓存更好利用
  13. ...
  14. output: {
  15.     filename: '[name].[contenthash:8].js',
  16.   path: resolve(__dirname, 'build')
  17. },
  18. plugins: [
  19.     new MiniCssExtractPlugin({
  20.       filename: '[name].[contenthash:8].css'
  21.   })
  22. ],
  23. module: {
  24.     rules: [
  25.     ...
  26.         {
  27.         test: /\.js$/,
  28.       loader: 'babel-loader',
  29.       exclude: /node_modules/,
  30.       options: {
  31.         presets: [
  32.           [
  33.             '@babel/preset-env',
  34.             {
  35.               useBuiltIns: 'usage',
  36.               corejs: {
  37.                 version: '3',
  38.               },
  39.               targets: {
  40.                 chrome: '60',
  41.                 ie: '9',
  42.                 safari: '40',
  43.                 firefox: '70',
  44.               },
  45.             },
  46.           ],
  47.         ],
  48.         // 开启babel缓存，第二次构建时会读取之前的缓存
  49.         // 比如有100个js文件，改了其中一个，只重新构建改动的那个，其他的从缓存中拿
  50.         cacheDirectory: true,
  51.       },
  52.     },
  53.     ...
  54.   ]
  55. },  
  56. ...

tree shaking

  1. tree shaking
  2. 作用：去掉无用的代码
  3. 条件：1.mode 为 production； 2.必须使用 es module
  5. package.josn 中的 "sideEffects": false , 表示所有的代码都没有副作用(可以进行tree shaking), 可能会把 css 或者 @babel/polyfill 干掉
  6. 个别文件不需要tree shaking，配置 "sideEffects": ["*.css", "xxx"]
  9. 具体需要改动的配置如下：
  10. webpack.config.js 增加配置：
  11. ...
  12. optimization: {
  13.     usedExports: true,
  14.   sideEffects: true,
  15. }
  16. ...
  18. package.json 增加配置：
  19. ...
  20. "sideEffects": [
  21.     "*.css",
  22.     "*.less",
  23.     "*.scss",
  24.       "*.sass"
  25.   ]
  26. ...
  29. .babelrc 增加配置：
  30. ...
  31.     presets: [
  32.       [
  33.         "@babel/preset-env",
  34.       {
  35.           modules: false,
  36.         // ...其他配置省略
  37.       }
  38.     ],
  39.     // ...其他配置省略
  40.   ]
  41. ...

code split

  1. ...
  2. // 多入口
  3. entry: {
  4.     main: './src/index.js',
  5.   some: './src/some.js',
  6. },
  7. // 一个入口对应一个bundle
  8. output: {
  9.   filename: '[name].[contenthash:8].js',
  10.   path: resolve(__dirname, 'build'),
  11. },
  12. /* 
  13.     1.可以将node_modules中的代码打包成一个chunk单独输出
  14.   2.自动分析多入口文件中的公共文件，打包生成一个chunk，
  15.   ⚠️：20kb 以上的代码才会单独打包
  16. */
  17. optimization: {
  18.   splitChunks: {
  19.     chunks: 'all',
  20.   },
  21. },
  22. ...

单入口的情况下，怎么把某个js文件单独打包成一个 bundle
  • 通过 import('xxx路径') ，返回一个 promise
  • 可通过添加注释 webpackChunkName: '自定义name' 的方式指定生成的 bundle 的 name 
    1. /* 
    2. 通过js代码，让某个文件能被单独打包成一个chunk
    3. import动态导入语法，能将某个文件单独打包
    4. 可通过注释语法 webpackChunkName 来指定生成的bundle的名字
    5. */
    6. import(/* webpackChunkName: 'myname' */ './test.js')
    7. .then(({ count }) => {
    8.   console.log('wy->module', count(2, 3));
    9. })
    10. .catch((err) => {
    11.   console.log('wy->err', err);
    12. });

image.png

懒加载 & 预加载

  • 通过 import() 动态导入实现懒加载和预加载
  • 通过注释 webpackPrefetch: true 来实现 预加载
  • 预加载有兼容性问题，只能在高版本浏览器里使用； ```javascript // 懒加载 & 预加载 模拟 // 定义个按钮，点击这个按钮的时候采取加载 test.js 文件

document.querySelector(‘#btn’).onclick = function () { import(/ webpackChunkName: ‘myname’, webpackPrefetch: true / ‘./test.js’) .then(({ count }) => { console.log(‘wy->module’, count(2, 3)); }) .catch((err) => { console.log(‘wy->err’, err); }); };

  3. <a name="kjmXP"></a>
  4. #### 多进程打包
  5. ```javascript
  6. ...  
  7. module: {
  8.     rules: [
  9.     {
  10.         test: /\.js$/,
  11.       exclude: /node_modules/,
  12.       use: [
  13.         {
  14.           // 使用：npm i thread-loader -D
  15.           // 开启多线程打包，进程启动时间大概600ms，进程间通信也有开销
  16.           // 打包时间较长，才去使用多进程打包
  17.             loader: 'thread-loader',
  18.           options: {
  19.               workers: 2 // 进程2个
  20.           }
  21.         },
  22.         {
  23.             loader: 'babel-loader',
  24.           options: {
  25.               presets: [
  26.                 [
  27.                   '@babel/preset-env',
  28.                 {
  29.                     useBuiltIns: 'usage',
  30.                   corejs: {
  31.                       version: '3',
  32.                   },
  33.                   targets: {
  34.                       chrome: 'xx',
  35.                     firefox: 'xx',
  36.                     safari: 'xx',
  37.                     ie: 'xx',
  38.                     edge: 'xx',
  39.                   }
  40.                 }    
  41.               ]
  42.             ]
  43.           }
  44.         }
  45.       ]
  46.     }
  47.   ]
  48. }
  49. ...

externals

  1. ...
  2. // 避免被打包的库，通过cdn的方式引入，如：react，react-dom，jquery 等
  3. externals: {
  4.   // 全局变量: 'npm 包名'
  5.     jquery: 'jQuery'
  6. }  
  7. ...

pwa

dll

webpack.dll.js 需要单独执行，webpack —config webpack.dll.js 打包第三方库，只需要打包一次，不需要重复打包

image.png

webpack.config.js

image.png

package.json

  1. {
  2.   "name": "webpack-wy",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "@babel/core": "^7.14.6",
  14.     "@babel/polyfill": "^7.12.1",
  15.     "@babel/preset-env": "^7.14.7",
  16.     "babel-loader": "^8.2.2",
  17.     "clean-webpack-plugin": "^4.0.0-alpha.0",
  18.     "core-js": "^3.15.2",
  19.     "css-loader": "^5.2.6",
  20.     "eslint": "^7.30.0",
  21.     "eslint-config-airbnb-base": "^14.2.1",
  22.     "eslint-plugin-import": "^2.23.4",
  23.     "file-loader": "^6.2.0",
  24.     "html-loader": "^2.1.2",
  25.     "html-webpack-plugin": "^5.3.2",
  26.     "less": "^4.1.1",
  27.     "less-loader": "^10.0.1",
  28.     "mini-css-extract-plugin": "^2.0.0",
  29.     "optimize-css-assets-webpack-plugin": "^6.0.1",
  30.     "postcss-loader": "^6.1.1",
  31.     "postcss-preset-env": "^6.7.0",
  32.     "style-loader": "^3.0.0",
  33.     "url-loader": "^4.1.1",
  34.     "webpack": "^5.42.0",
  35.     "webpack-cli": "^3.3.12",
  36.     "webpack-dev-server": "^3.11.2"
  37.   },
  38.   "browserslist": {
  39.     "development": [
  40.       "last 1 chrome version",
  41.       "last 1 firefox version",
  42.       "last 1 safari version"
  43.     ],
  44.     "production": [
  45.       ">0.2%",
  46.       "not dead",
  47.       "not op_mini all"
  48.     ]
  49.   }
  50. }