这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

path.join 和path.resolve 的区别

path.join

path.join(path1[, ...]) path.join()方法可以连接任意多个路径字符串。要连接的多个路径可做为参数传入。

path.join()方法在接边路径的同时也会对路径进行规范化。例如：

var path = require('path'); 
//合法的字符串连接 
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..') 
// 连接后 
'/foo/bar/baz/asdf' 

//不合法的字符串将抛出异常 
path.join('foo', {}, 'bar') 
// 抛出的异常 TypeError: Arguments to path.join must be strings'

path.resolve

路径解析：path.resolve([from ...], to)

path.resolve()方法可以将多个路径解析为一个规范化的绝对路径。其处理方式类似于对这些路径逐一进行cd操作，与cd操作不同的是，这引起路径可以是文件，并且可不必实际存在（resolve()方法不会利用底层的文件系统判断路径是否存在，而只是进行路径字符串操作）。例如：

path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')
//相当于
cd foo/bar
cd /tmp/file/
cd ..
cd a/../subfile
pwd

如何处理es6+ 代码

通过接入babel，以loader的形式引入

//所需三个依赖
//babel/core
//babel/preset-env
//babel-loader

plugins模块

HtmlWebpackPlugin

生成html文件
自动引入js类型资源

Dashboard

美化控制台

CleanWebpackPlugin

构建之前清理dist目录

HMR

模块热更新

//hot:true
//open:true
//watch: true 持续监听，控制台可打印

工具链

Tree-Shaking

如何开启tree-shaking

mode:production

// optimization.usedExports:true

执行顺序:默认情况下是：从右往左，从下往上

多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader

由于启动项目和打包项目都需要加速，所以配置在webpack.base.js

//npm i thread-loader -D
// 复制代码
// webpack.base.js

{
  test: /.js$/,
    use: [
      'thread-loader',
      'babel-loader'
    ],
}
}

cache-loader

缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader

由于启动项目和打包项目都需要加速，所以配置在webpack.base.js

// npm i cache-loader -D
// 复制代码
// webpack.base.js

{
  test: /.js$/,
    use: [
      'cache-loader',
      'thread-loader',
      'babel-loader'
    ],
},

exclude & include

exclude：不需要处理的文件
include：需要处理的文件

合理设置这两个属性，可以大大提高构建速度

在webpack.base.js中配置

// webpack.base.js

{
  test: /.js$/,
    //使用include来指定编译文件夹
    include: path.resolve(__dirname, '../src'),
      //使用exclude排除指定文件夹
      exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
},

构建区分环境

区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：

开发环境：去除代码压缩、gzip、体积分析等优化的配置，大大提高构建速度
生产环境：需要代码压缩、gzip、体积分析等优化的配置，大大降低最终项目打包体积

CSS代码压缩

CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

npm i css-minimizer-webpack-plugin -D
复制代码
// webpack.prod.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization: {
  minimizer: [
    new CssMinimizerPlugin(), // 去重压缩css
  ],
}

JS代码压缩

JS代码压缩使用terser-webpack-plugin，实现打包后JS代码的压缩

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

npm i terser-webpack-plugin -D
// webpack.prod.js
const TerserPlugin = require('terser-webpack-plugin')

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 去重压缩css
      new TerserPlugin({ // 压缩JS代码
        terserOptions: {
          compress: {
            drop_console: true, // 去除console
          },
        },
      }), // 压缩JavaScript
    ],
  }

sourcemap

source-map的作用是：方便你报错的时候能定位到错误代码的位置。它的体积不容小觑，所以对于不同环境设置不同的类型是很有必要的。
devolpment模式下默认开启，production默认关闭

开发环境

// 开发环境的时候我们需要能精准定位错误代码的位置
// webpack.dev.js

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

生产环境

// 生产环境，我们想开启source-map，但是又不想体积太大，那么可以换一种类型
// webpack.prod.js

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

打包体积分析

使用webpack-bundle-analyzer可以审查打包后的体积分布，进而进行相应的体积优化

只需要打包时看体积，所以只需在webpack.prod.js中配置

npm i webpack-bundle-analyzer -D
复制代码
// webpack.prod.js

const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')

plugins: [
  new BundleAnalyzerPlugin(),
]

用户体验优化

Gzip

开启Gzip后，大大提高用户的页面加载速度，因为gzip的体积比原文件小很多，当然需要后端的配合，使用compression-webpack-plugin.
nginx可以配置Gzip

只需要打包时优化体积，所以只需在webpack.prod.js中配置

npm i compression-webpack-plugin -D
复制代码
// webpack.prod.js

const CompressionPlugin = require('compression-webpack-plugin')

plugins: [
  // 之前的代码...
  
  // gzip
  new CompressionPlugin({
    algorithm: 'gzip',
    threshold: 10240,
    minRatio: 0.8
  })
]

小图片转base64

对于一些小图片，可以转base64，这样可以减少用户的http网络请求次数，提高用户的体验。webpack5中url-loader已被废弃，改用asset-module

在webpack.base.js中配置

// webpack.base.js

{
  test: /.(png|jpe?g|gif|svg|webp)$/,
    type: 'asset',
      parser: {
        // 转base64的条件
        dataUrlCondition: {
          maxSize: 25 * 1024, // 25kb
        }
      },
        generator: {
          // 打包到 image 文件下
          filename: 'images/[contenthash][ext][query]',
        },
},

合理配置hash

我们要保证，改过的文件需要更新hash值，而没改过的文件依然保持原本的hash值，这样才能保证在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的.

在webpack.base.js中配置

output: {
  path: path.resolve(__dirname, '../dist'),
    // 给js文件加上 contenthash
    filename: 'js/chunk-[contenthash].js',
      clean: true,
},

webpack实战｜ 青训营笔记

path.join 和path.resolve 的区别

path.join

path.resolve

如何处理es6+ 代码

plugins模块

HtmlWebpackPlugin

Dashboard

CleanWebpackPlugin

HMR

工具链

Tree-Shaking

cache-loader

exclude & include

构建区分环境

CSS代码压缩

JS代码压缩

sourcemap

开发环境

生产环境

打包体积分析

用户体验优化

Gzip

小图片转base64

合理配置hash

webpack实战｜青训营笔记