webpack（看完学会webpack）

胆大如牛白展堂
125 阅读4分钟

webpack4

性能优化介绍

开发环境性能优化

优化代码打包构建速度

  1. HMR 热更新

它能够在保持页面状态的情况下动态替换资源模块，提供丝滑顺畅的 Web 页面开发体验。 只重新打包更改的模块，未更改的模块使用缓存，不必全部重新统一打包。

HTML：因为只有一个HTML所以不用做HMR处理，肯定会重新打包；

CSS:：经过style-loader处理，自动实现，所以当要求使用HMR时必须使用style-loader；

JS： 人为配置

优化代码调试

  1. source-map

构建处理前的代码和处理后的代码之间的桥梁。方便查看源代码哪里出错了。

生产环境性能优化

优化代码打包构建速度

  1. oneOf

找到该被处理的文件就立即处理，不在向下寻找，优化了性能。

  1. Babel缓存

babel使用后会将处理后的模块缓存起来，再次打包可使用该缓存

  1. 多进程打包

同一时间能干多件事，可以提高打包速度，缺点是每个进程的开启和关闭都会有开销。

  1. external 和 dll 让某些文件不打包

优化代码运行的性能

  1. 缓存：在一定时间内缓存打包后的代码，根据新传来的hash值决定是否进行缓存的更新。
  • hash：根据新传来的hash值决定是否进行缓存的更新。
  • chunkhash：打包的入口为同一入口则为同一chunk，同一个chunk享受同一个hash，但是css的文件也是JS文件引入进来的，当JS文件发生改变时，css文件也要发生改变。
  • contenthash：根据文件内容生成hash值，文件不变，hash值就不变，就可以用缓存的文件。
  1. tree shaking

去除业务代码中的无用的代码。使用生产环境时自动启用。

  1. js懒加载/预加载
  2. code split： import export 导入导出。
  3. pwa

无网可访问

entry: 入口起点

1. string --> './src/index.js'
  单入口
  打包形成一个chunk。 输出一个bundle文件。
  此时chunk的名称默认是 main
2. array  --> ['./src/index.js', './src/add.js']
  多入口
  所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
    --> 只有在HMR功能中让html热更新生效~
3. object
  多入口
  有几个入口文件就形成几个chunk，输出几个bundle文件
  此时chunk的名称是 key

  --> 特殊用法
    {
      // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
      index: ['./src/index.js', './src/count.js'], 
      // 形成一个chunk，输出一个bundle文件。
      add: './src/add.js'
    }

output:

// 文件名称（指定名称+目录）
filename: 'js/[name].js',
// 输出文件目录（将来所有资源输出的公共目录）
path: resolve(__dirname, 'build'),
// 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
publicPath: '/',
chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
// library: '[name]', // 整个库向外暴露的变量名
// libraryTarget: 'window' // 变量名添加到哪个上 browser
// libraryTarget: 'global' // 变量名添加到哪个上 node
// libraryTarget: 'commonjs'

module:

rules: [
  // loader的配置
  {
    test: /\.css$/,
    // 多个loader用use
    use: ['style-loader', 'css-loader']
  },
  {
    test: /\.js$/,
    // 排除node_modules下的js文件
    exclude: /node_modules/,
    // 只检查 src 下的js文件
    include: resolve(__dirname, 'src'),
    // 优先执行
    enforce: 'pre',
    // 延后执行
    // enforce: 'post',
    // 单个loader用loader
    loader: 'eslint-loader',
    options: {}
  },
  {
    // 以下配置只会生效一个
    oneOf: []
  }
]

resolve: 配置解析模块的规则

// 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
alias: {
  $css: resolve(__dirname, 'src/css')
},
// 配置省略文件路径的后缀名
extensions: ['.js', '.json', '.jsx', '.css'],
// 告诉 webpack 解析模块是去找哪个目录
modules: [resolve(__dirname, '../../node_modules'), 'node_modules']

devServer

// 运行代码的目录
contentBase: resolve(__dirname, 'build'),
// 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
watchContentBase: true,
watchOptions: {
  // 忽略文件
  ignored: /node_modules/
},
// 启动gzip压缩
compress: true,
// 端口号
port: 5000,
// 域名
host: 'localhost',
// 自动打开浏览器
open: true,
// 开启HMR功能
hot: true,
// 不要显示启动服务器日志信息
clientLogLevel: 'none',
// 除了一些基本启动信息以外，其他内容都不要显示
quiet: true,
// 如果出错了，不要全屏提示~
overlay: false,
// 服务器代理 --> 解决开发环境跨域问题
proxy: {
  // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
  '/api': {
    target: 'http://localhost:3000',
    // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
    pathRewrite: {
      '^/api': ''
    }
  }
}

optimization:

splitChunks: {
  chunks: 'all'
  // 默认值，可以不写~
  /* minSize: 30 * 1024, // 分割的chunk最小为30kb
  maxSiza: 0, // 最大没有限制
  minChunks: 1, // 要提取的chunk最少被引用1次
  maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
  maxInitialRequests: 3, // 入口js文件最大并行请求数量
  automaticNameDelimiter: '~', // 名称连接符
  name: true, // 可以使用命名规则
  cacheGroups: {
    // 分割chunk的组
    // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
    // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      // 优先级
      priority: -10
    },
    default: {
      // 要提取的chunk最少被引用2次
      minChunks: 2,
      // 优先级
      priority: -20,
      // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
      reuseExistingChunk: true
    } 
  }*/
},
// 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
// 解决：修改a文件导致b文件的contenthash变化
runtimeChunk: {
  name: entrypoint => `runtime-${entrypoint.name}`
},
minimizer: [
  // 配置生产环境的压缩方案：js和css
  new TerserWebpackPlugin({
    // 开启缓存
    cache: true,
    // 开启多进程打包
    parallel: true,
    // 启动source-map
    sourceMap: true
  })
]

开发模式基本配置

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  
  
  
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  
  
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  
  
  mode: 'development',
  
  
 
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

生产环境基本配置

const { resolve } = require('path');

// 把css单独打包成一个文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 压缩css文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      /*
        正常来讲，一个文件只能被一个loader处理。
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
          先执行eslint 在执行babel
      */
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {version: 3},
                targets: {
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

webpack5

juejin.cn/post/690971…

avatar
文章
阅读
粉丝