【Webpack】关于loader、plugin和代码分离的那些事儿

本文链接：https://blog.youkuaiyun.com/weixin_45620943/article/details/135748045

1. loader

1.1 css-loader&style-loader

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

css-loader从css文件中提取css字符串，遇到css中的url图片地址，会将图片处理并添加到output指定目录，并将最终url引用地址替换原来url引用地址。

style-loader转换成JS执行脚本：创建<style>标签，将提取字符串写入标签，appendChild到<head> 中。

loader执行顺序：从右到左（从下往上）。

1.2 asset/resource

// loader规则
{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset/resource',
},

// 处理import图片文件
import MyImage from './my-image.png'


// loader规则
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource',
},

// 处理url字体文件
@font-face {
  font-family: 'MyFont';
  src: url('./my-font.woff2') format('woff2'),
    url('./my-font.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

.hello {
  color: red;
  font-family: 'MyFont';
  background: url('./icon.png');
}

asset/resource会将图片文件处理并添加到output目录，将最终url赋值给MyImage。

asset/resource会将字体文件处理并添加到ouput目录，将最终url引用地址替换原来url引用地址。

1.3 csv-loader、xml-loader

// loader规则
{
  test: /\.(csv|tsv)$/i,
  use: ['csv-loader'],
},
{
  test: /\.xml$/i,
  use: ['xml-loader'],
}

// 处理import导入xml和csv文件
import Data from './data.xml';
import Notes from './data.csv';

csv-loader会从csv文件提取出数据，并转换成json格式。

xml-loader会从xml文件提取出数据，并转换成json格式。

2. plugin

2.1 html-webpack-plugin

有template以template为准，没有template会创建一个html文件，所有生成的bundle添加到到html文件中。

2.2 mini-css-extract-plugin

用于将CSS从主应用程序中分离。

2.3 webpack-bundle-analyzer

一个plugin和CLI工具，它将 bundle 内容展示为一个便捷的、交互式、可缩放的树状图形式。

2.4 Webpack.DefinePlugin

3. 代码分离

3.1 入口起点

使用entry配置手动地分离代码。

3.2 防止重复

使用入口依赖或者SplitChunksPlugin 去重和分离chunk。

// 入口依赖
entry: {
  index: {
    import: './src/index.js',
    dependOn: 'shared',
  },
  another: {
     import: './src/another-module.js',
     dependOn: 'shared',
   },
   shared: 'lodash',
},
optimization: {
   runtimeChunk: 'single',
}, // 入口 chunk 中，包含了某些 boilerplate（引导模板），特别是 runtime 和 manifest


// splitChunksPlugin
optimization: {
  splitChunks: {
    chunks: 'all',
  },
},

3.3 动态导入

通过模块的内联函数调用分离代码。

第一种，也是推荐选择的方式，是使用符合ECMAScript提案的import()语法实现动态导入
第二种，则是webpack的遗留功能，使用webpack特定的require.ensure

function getComponent() {
  const element = document.createElement('div');
  // lodash 现在使用 import 引入
  return import('lodash').then(({ default: _ }) => {
      const element = document.createElement('div');
      element.innerHTML = _.join(['Hello', 'webpack'], ' ');
      return element;
    }).catch((error) => 'An error occurred while loading the component');
}