webpack打包相关

SuRuiGit

browserify:用于将CommonJS编译之后可以在浏览器端使用

一、mode

开发环境mode:'development'
生产环境mode:'production'

二、entry

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

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'
  },

filename与缓存

  • hash,webpack每次打包都会生成新的hash值
  • chunkhash,根据chunk生成的hash值,如果打包来源于同一个chunk,那么hash值就一样
  • contenthash,根据文件的内容生成hash值,不同文件的hash值一定不一样

四、loader

webpack只能处理js和json文件,其他类型文件需要loader进行编译转换成webpack可识别的文件

1. 处理样式文件,css、less、sass等

style-loader:创建style标签,将js中的样式资源插入进行,添加到head中生效
css-loader:将css文件编译成commonjs模块加载js中,里面内容是样式字符串
less-loader:将less文件编译成css文件
sass-loader:将sass文件编译成css文件

生产环境处理样式文件

(1) 提取css成单独文件
MiniCssExtractPlugin:使用MiniCssExtractPlugin.loader代替style-loader,style-loader内置了HMR功能,所以开发环境还用style-loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

(2) css兼容性处理
postcss,postcss-loader,postcss可以在webpack中配置也可以在postcss.config.js中配置。
postcss兼容的常用插件autoprefixer、postcss-preset-env
browserslist浏览器列表配置,可以在package.json中配置browserslist,也可以在.browserslistrc配置

(3) 压缩css
webpack5以前的版本使用optimize-css-assets-webpack-plugin
webpack5及以后的版本使用css-minimizer-webpack-plugin

2. 处理图片资源

url-loader:基于file-loader,增加base64处理
html-loader:处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)

3. 处理字体资源以及其他资源

file-loader

4. 处理js

(1) js语法检查

eslint-loader(已过时,请使用eslint-webpack-plugin)、eslint(详见https://segmentfault.com/a/11...)

(2) js兼容

babel-loader(支持缓存)
@babel/cli @babel/core(按需加载polyfill) 详见babel转码器
@babel/preset-env
@babel/polyfill(已过时,整体加载体积太大)

(3)js压缩

只需要将mode设置为production,js代码会自动压缩

五、resolve

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

六、devServer

开发环境使用,自动编译,自动打开浏览器,自动刷新浏览器。
设置hot:true开启HMR(模块热替换),一个模块发生变化,只会重新打包这一个模块,而不是打包所有模块,提升构建速度。

  • 样式文件使用style-loader就可以使用HMR功能
  • js文件需要在js中修改代码,只能处理非入口js文件的其他文件
if (module.hot) {
   module.hot.accept('./print.js', function() {
     console.log('Accepting the updated printMe module!');
     printMe();
   })
 }

七、devtool

提供源代码与构建后的代码的映射。分两大类:

  • 内联,把映射关系嵌套到js文件中
  • 外部,单独生成一个映射文件,生产环境不用内联,而且应该隐藏源码

八、externals

防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
例如,从 CDN 引入 jQuery,而不是把它打包

九、生产环境优化

1.处理并压缩html

html-webpack-plugin

2.缓存

  • 使用babel-loader进行babel缓存,cacheDirectory: true,让第二次打包构建速度更快
  • 文件资源缓存output里的filename使用contenthash

3.treeShaking:去除无用代码

前提:1. 必须使用ES6模块化 2. 开启production环境
在package.json中配置

  "sideEffects": false 所有代码都没有副作用(都可以进行tree shaking)
    问题:可能会把css / @babel/polyfill (副作用)文件去掉
  "sideEffects": ["*.css", "*.less"]

4.codesplit

(1) 使用splitChunks

  • 可以将node_modules中代码单独打包一个chunk最终输出
  • 自动分析多入口chunk中,有没有公共的文件。如果有会打包成单独一个chunk
module.exports = {
  entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: 'production'
};

(2) 使用import动态导入语法,能将某个文件单独打包成一个chunk

import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

5.懒加载

使用import动态导入语法进行懒加载

6.dll

使用dll技术,对某些库(第三方库:jquery、react、vue...)进行单独打包
当你运行 webpack 时,默认查找 webpack.config.js 配置文件
在webpack.dll.js 文件中配置需要单独打包的库,DllPlugin 和 DllReferencePlugin 配合使用

阅读 785

前端随笔
前端开发学习总结
264 声望
21 粉丝
0 条评论
264 声望
21 粉丝
宣传栏