【webpack】高级配置（优化配置）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【webpack】高级配置（优化配置）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

webpack高级配置

提升开发体验
提升打包构建速度
减少代码体积
优化代码运行性能

下载静态资源：npm i serve -g
启动开发服务器：serve dist 可以启动本地

提升开发体验
source-map 源代码映射是一个用来生成源代码与构建后代码一一映射文件的方案，用来增强开发模式和生产模式的调试查找错误代码的位置。
source-map会生成一个xx.map 文件，里边包含文件中的源代码，构建后代码每一行，每一列的映射关系，当构建后代码出错位置找到映射后文件出错位置，帮助我们更快的找到错误根源。
实际开发中：
开发模式：cheap-module-source-map，打包编译速度快，只包含行映射，但没有列映射，因为开发模式代码会被格式化，每一行代码少，因此不需要列映射，也可以找到错误位置。

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map'
}

生产模式：source-map，包含行/列映射，但打包速度慢，

module.exports = {
    mode: 'production',
    devtool: 'source-map'
}

打包构建速度

HotModuleReplacement：热模块替换，在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。实际开发中，使用其他loader解决，react-hot-loader

module.exports = {
   devServer: {
      host:'localhost', // 启动服务器域名
      port:'3000', // 启动服务器端口号
      open: true, // 是否自动打开浏览器
      hot: true, // 是否开启HMR功能，只用于开发环境
   }
}

实例：在main.js中，需要判断HMR功能

if(module.hot){
   module.hot.accept('./js/count.js',function(){
       console.log('hhhhh')
   })
}

oneOf ：每一个文件只被其中一个loader命中

module: {
  rules: [
     {
        oneOf: [
           {
              test: /\.less/,
              use: getStyleLoader('less-loader')
           },
        ]
     }
  ]
}

inclue / exclude 目的是只处理一些文件，这样可以提高性能

{
   test: /\.js$/,
   include: path.resolve(__dirname,'../src') // 只处理src文件
   // exclude: /node_modules/  排除node_modules
}

// 插件
// 生产模式和开发模式都需要
plugins: [
   new ESlintPlugin({
      context: path.resolve(__dirname,'../src'),
      exclude: /node_modules/   // 排除node_modules
   })
]

cache eslint和babel的缓存，第二次打包时，不用打包包含所有文件，只针对需要修改的文件进行eslint检查和web编译，是第二次打包速度变快

{
   test: /\.js$/,
   include: path.resolve(__dirname,'../src'),
   loader: 'babel-loader',
   options: {
      presets: ['@babel/preset-env'],
      cacheDirectory: true, // 开启babel缓存
      cacheCompresion: false, // 关闭缓存文件压缩
   }
}

// 插件
// 生产模式和开发模式都需要
plugins: [
   new ESlintPlugin({
      context: path.resolve(__dirname,'../src'),
      exclude: /node_modules/,   // 排除node_modules
      cache: true, // 开启缓存
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache')
   })
]

Thead 多进程打包，对于js文件处理，主要是eslint、babel、Terser三个工具，因此需要提升它们的运行速度

// 压缩js
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 在webpack.config.js文件中
// 1.获取cpu核数
const os = require('os'),
const threads = os.cpus().length
// 2.下载包
npm i thread-loader -D
// 3.配置
{
   test: /\.js$/,
   include:path.resolve(__dirname,'./src'),
   use: [
      { 
         loader: 'thread-loader', // 开启多进程
         options: {
            works: threads // 进程数量
         }
      },
      {
         loader: 'babel-loader',
         options: {
            cacheDirectory: true, // 开启babel缓存
            cacheCompression: false, // 关闭缓存文件压缩
         }
      }
   ]
}

// 插件
// 生产模式和开发模式都需要
plugins: [
   new ESlintPlugin({
      context: path.resolve(__dirname,'../src'),
      exclude: /node_modules/,   // 排除node_modules
      cache: true, // 开启缓存
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
      threads, // cpu长度
   }),
   // 在压缩文件也可以使用，optimization配置
   new TerserWebpackPlugin({
      parallel: threads, // 开启多进程和设置进程数量
   })
]

减少代码体积
tree shaking webpack 中一个术语，通常用于描述移除js中没有使用的代码。它依赖于es module，webpack默认开启这个功能，无需其他配置。

babel 为编译的每一个文件插入辅助代码，使代码体积过大。

// babel对一些公共方法使用非常小的辅助代码，如_extend，默认情况下会被添加到每一个它需要的文件中。
{
   loader: 'babel-loader',
   option:{
      cacheDirectory: true,
      cacheCompression: false,
      // 减少代码体积，禁用了babel自动对每个文件的runtime注入
      // 引入此插件
      plugins: ['@babel/plugin-transform-runtime']
   }
}

image Minimizer 图片体积减少

// 下载包：npm i image-minimizer-webpack-plugin -D
// 其他包：npm i imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
// 在webpack.config.js中
const ImageMinimizer = require('image-minimizer-webpack-plugin')

{
  plugins: [
     new ImageMinimizer({
       minizer: {
          implementation: ImageMinimazerPlugin.imageminGenerate,
          options: {
             plugins: [
                ['gifsicle', {interlaced: true}],
                ['jpegtran',{progressive: true}],
                ['optipng',{optimizationLevel: 5}],
                ['svgo',{
                   plugins: [
                      'preset-default',
                      'prefixIds',
                      {
                         name: 'sortAttrs',
                         params: {
                            xmlnSorder: 'alphabetical'
                         }
                      }
                   ]
                }]
             ]
          }
       }
     })
}

优化代码运行性能
code split 将代码分割，生成多个js文件，渲染哪个页面就只加载某个js文件，可以减少加载资源，速度更快。

// 在webpack.config.js文件配置
const path = require('path') // 路径配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   entry: {
     // 多入口文件为对象形式，一个入口文件字符串
      main: './src/main.js',
      app: './src/app.js'
   },
   output: {
      path: path.resolve(__dirname,'dist'),
      filename: '[name].js', // webpack命名方式，[name]以文件名自己命名
   },
   plugins: [
      new HtmlWebpackPlugin({ template: path.resolve(__dirname,'public/index.html') })
   ]
}

// 多入口提供公共模块
// 在webpack.config.js文件中配置
optimization: {
   aplitChunks: {
       chunks: 'all', // 对所有模块进行分割
       minSize: 20000, // 分割代码最小的大小
       minRemainingSize: 0, // 类似于minSize,最后确保提取文件大小不能为0
       minChunks: 1, // 至少被引用的次数，满足条件才会被代码分割
       maxAsyncRequst: 30, // 按需加载并行加载文件最大数量
       maxInitialRequest: 30, // 入口js文件最大并行请求数量
       enforceSizeThreshold: 5000, // 超过50kb单独打包
       cacheGroups: {
          // 哪些模块需要打包到一个组,权重更大
          default:{
             minChunks:2,
             pribirity: -20,
             reuseExistingChunks: true
          }
       }
   }
}

如果使用node_modules代码，会将此打包单独js文件

.eslintrc.js文件配置
module.exports = {
   plugins: ['import'] // 解决动态导入语法报错
}

统一命名 ：在webpack.config.js文件中

entry: './src/main.js',
output: {
   // 入口文件打包输出文件名
   filename:'static/js/[name].js',
   // 给打包输出的其他文件命名
   chunkFilename: 'static/js/[name].js',
   // 图片、字体等通过type:asset处理资源命名方式
   assetModuleFilename: 'static/media/[hash:10][ext][query]'
},
plugins: [
   new MiniCssExtractPlugin({
      filename: 'static/css/[name].css',
      // 根据文件内容，确定文件名，文件内容发生变化hash值发生变化
      chunkFilename: 'static/css/[name].chunk.css'
   })
]

preload / prefetch
按需加载，懒加载，如路由懒加载实现
如：用户点击按钮才加载这个资源，如果资源体积很大，用户会感觉到明显卡顿，这时需要preload或prefetch
preload：浏览器立即加载
prefetch：浏览器空闲时才开始加载

// preload：只加载当前页面需要使用资源，
// prefetch：可以加载当前页面资源，也可以加载下一个页面需要使用的资源
//下载包：npm i --save-dev @vue/preload-webpack-plugin
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin')

plugins: [
   new PreloadWebpackPlugin({
      rel: 'preload',
      as: 'script',
      // ref: 'prefetch'
   })
]

NetWork Cache
解决问题：入口文件a依赖于b文件、c文件，如果b文件中有变化，那么a文件也会发生变化，因此定义runtime文件存储hash值。

// 缓存资源发生变化，需要加载新的资源
// 一个文件发生变化，只一个文件变化，其他文件hash值不变
//在webpack.config.js文件中配置
optimization: {
  runtimeChunk: {
     name: (entrypoint)=> `runtime~${entrypoint.name}.js`
  }
}

解决js兼容问题corejs
@babel/preset-env 智能预设处理，它能将es6的一些语法进行编译转化，如箭头函数，扩展运算符，但是如果为async函数，promise对象，数组的一些方法，不可以处理。
corejs用来专门做es6以上api的polyfill（补丁）

// 在babel.config.js文件中
module.exports = {
   presets: [
      [
         '@babel/preset-env',
         {
            useBuiltIns: 'usage', // 按需加载 自动引入
            corejs: 3,
         }
      ]
   ]
}

PWR 渐进式网络应用程序
一种可以提供类似与native app 体验的web app技术。在离线时应用程序能够继续进行功能，内部通过sevice workers 技术实现的。文章来源地址https://www.toymoban.com/news/detail-498461.html

// 下载npm i workbox-webpack-plugin -D
// 在webpack.config.js文件配置
const WorkboxPlugin = require('workbox-webpack-plugin')
plugins: [
   new WorkboxPlugin.GenerateSW({
      clientsClaim: true, // 帮助快速启用service worker
      skipWaiting: true
   })
]
// 在main.js中注册
window.addEventListener('load', function() {
  if('serviceWorker' in navigator){
     // serviceworker.js 文件要放在网站发布的根目录
      navigator.serviceWorker.register('/serviceworker.js').then(function (registration) {
         console.log('Service Worker Registered,register script: serviceworker.js.');
      }).catch(function (error) {
        // registration failed
        console.log('Registration failed with ' + error);
    });
  }
});