关于前端:吐血整理的webpack入门知识及常用loader和plugin

在这个内卷为王的时代，内卷文化曾经渗透到工作和生存的方方面面。不在常识的陆地里飞翔，就会在常识的陆地里溺亡。作为一名新生代农民工，在智商与怠惰曾经被工友大佬们双重碾压的同时，面对突飞猛进的搬砖 (编程) 技能，学习的速度曾经赶不上忘记的速度，可是还得强忍泪水拥抱变动、一直打怪降级。

最近梳理了下以前 webpack 的相干开发教训，整顿和总结了一份入门笔记。欢送大家围观和批评指正。

随着 web 利用越来越简单和宏大，前端技术迅猛发展，各路大神各显神通，多种优良的前端框架、新语言和其余相干技术 (如下图所示) 不断涌现，这些都极大地提高了咱们的开发效率

然鹅，咱们都晓得这些技术都有一个共同点，那就是源代码都无奈间接在浏览器上运行。此时，咱们就须要通过构建工具将这些代码转换成浏览器可执行的 JS、CSS、HTML。这对前端构建工具有了更高的要求。

历史上也呈现了一系列构建工具，一些常见的如下：

其中，Webpack 凭借其弱小的性能与良好的应用体验，还有有宏大的社区反对，在泛滥构建工具中怀才不遇成为时下最风行的构建工具。

在言归正传之前，咱们先来简略理解一下 webpack。

依据官网介绍，Webpack 是一个用于古代 JavaScript 应用程序的动态模块打包工具。当 webpack 解决应用程序时，它会在外部从一个或多个入口点构建一个依赖图(dependency graph)，而后将你我的项目中所需的每一个模块组合成一个或多个 bundles，它们均为动态资源，用于展现你的内容。

Entry：入口，批示 Webpack 应该应用哪个模块，来作为构建其外部依赖图(dependency graph) 的开始。
Output：输入后果，通知 Webpack 在哪里输入它所创立的 bundle，以及如何命名这些文件。
Module：模块，在 Webpack 里所有皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与宰割。
Loader：模块代码转换器，让 webpack 可能去解决除了 JS、JSON 之外的其余类型的文件，并将它们转换为无效模块，以供应用程序应用，以及被增加到依赖图中。
Plugin：扩大插件。在 webpack 运行的生命周期中会播送出许多事件，plugin 能够监听这些事件，在适合的机会通过 webpack 提供的 api 扭转输入后果。常见的有：打包优化，资源管理，注入环境变量。
Mode：模式，告知 webpack 应用相应模式的内置优化
Browser Compatibility：浏览器兼容性，Webpack 反对所有合乎 ES5 规范的浏览器（IE8 以上版本）

Webpack 的作用十分多，简略列举几点如下：

咱们能够通过 loader 和 plugin 机制去进一步扩大能力，依照我的项目须要去实现个性化的性能。

* 铺垫了那么多，当初回归主题吧！ *

Webpack 是由 nodejs 编写的前端资源加载 / 打包工具，由 nodejs 提供了弱小的文件解决，IO 能力。

Loader 和 Plugin 在 Webpack 里是支柱能力。在整个构建流程中，Loader 和 Plugin 对编译后果起着决定性的作用，上面次要讲一下 Webpack 中一些罕用的 Loader 和 Plugin。

webpack 中提供了一种解决多种文件格式的机制，这便是 Loader，咱们能够把 Loader 当成一个转换器，它能够将某种格局的文件转换成 Wwebpack 反对打包的模块。

在 Webpack 中，所有皆模块，咱们常见的 Javascript、CSS、Less、Typescript、Jsx、图片等文件都是模块，不同模块的加载是通过模块加载器来对立治理的，当咱们须要应用不同的 Loader 来解析不同类型的文件时，咱们能够在 module.rules 字段下配置相干规定。

loader 实质上是一个函数，output=loader(input) // input 可为工程源文件的字符串，也可是上一个 loader 转化后的后果；
第一个 loader 的传入参数只有一个：资源文件 (resource file) 的内容；
loader 反对链式调用，webpack 打包时是依照数组从后往前的程序将资源交给 loader 解决的。
反对同步或异步函数。

代码构造通常如下：

// source：资源输出，对于第一个执行的 loader 为资源文件的内容；后续执行的 loader 则为前一个 loader 的执行后果
// sourceMap: 可选参数，代码的 sourcemap 构造
// data: 可选参数，其它须要在 Loader 链中传递的信息，比方 posthtml/posthtml-loader 就会通过这个参数传递参数的 AST 对象
const loaderUtils = require('loader-utils');

module.exports = function(source, sourceMap?, data?) {
  // 获取到用户给以后 Loader 传入的 options
  const options = loaderUtils.getOptions(this);
  // TODO：此处为转换 source 的逻辑
  return source;
};

babel-loader 基于 babel，用于解析 JavaScript 文件。babel 有丰盛的预设和插件，babel 的配置能够间接写到 options 里或者独自写道配置文件里。

Babel 是一个 Javscript 编译器，能够将高级语法 (次要是 ECMAScript 2015+) 编译成浏览器反对的低版本语法，它能够帮忙你用最新版本的 Javascript 写代码，进步开发效率。

webpack 通过 babel-loader 应用 Babel。

用法：


# 环境要求:
webpack 4.x || 5.x | babel-loader 8.x | babel 7.x

# 装置依赖包:
npm install -D babel-loader @babel/core @babel/preset-env webpack

而后，咱们须要建设一个 Babel 配置文件来指定编译的规定。

Babel 配置里的两大外围：插件数组(plugins) 和预设数组(presets)。

Babel 的预设（preset）能够被看作是一组 Babel 插件的汇合，由一系列插件组成。

罕用预设：

@babel/preset-env ES2015+ 语法
@babel/preset-typescript TypeScript
@babel/preset-react React
@babel/preset-flow Flow

插件和预设的执行程序：

插件比预设先执行
插件执行程序是插件数组从前向后执行
预设执行程序是预设数组从后向前执行

webpack 配置代码：

// webpack.config.js
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', { targets: "defaults"}]
          ],
          plugins: ['@babel/plugin-proposal-class-properties'],
          // 缓存 loader 的执行后果到指定目录，默认为 node_modules/.cache/babel-loader，之后的 webpack 构建，将会尝试读取缓存
          cacheDirectory: true,
        }
      }
    }
  ]
}

以上 options 参数也可独自写到配置文件里，许多其余工具都有相似的配置文件：ESLint (.eslintrc)、Prettier (.prettierrc)。

配置文件咱们个别只须要配置 presets(预设数组) 和 plugins(插件数组)，其余个别也用不到，代码示例如下：

// babel.config.js
module.exports = (api) => {
    return {
        presets: [
            '@babel/preset-react',
            [
                '@babel/preset-env', {
                    useBuiltIns: 'usage',
                    corejs: '2',
                    targets: {
                        chrome: '58',
                        ie: '10'
                    }
                }
            ]
        ],
        plugins: [
            '@babel/plugin-transform-react-jsx',
            '@babel/plugin-proposal-class-properties'
        ]
    };
};

举荐浏览：

babel 配置文件相干文档
插件手册

为 webpack 提供的 TypeScript loader，打包编译 Typescript

装置依赖：

npm install ts-loader --save-dev
npm install typescript --dev

webpack 配置如下：


// webpack.config.json
module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./app.ts",
  output: {filename: "bundle.js"},
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      {test: /\.tsx?$/, loader: "ts-loader"}
    ]
  }
};

还须要 typescript 编译器的配置文件tsconfig.json：

{
  "compilerOptions": {
    // 目标语言的版本
    "target": "esnext",
    // 生成代码的模板规范
    "module": "esnext",
    "moduleResolution": "node",
    // 容许编译器编译 JS，JSX 文件
    "allowJS": true,
    // 容许在 JS 文件中报错，通常与 allowJS 一起应用
    "checkJs": true,
    "noEmit": true,
    // 是否生成 source map 文件
    "sourceMap": true,
    // 指定 jsx 模式
    "jsx": "react"
  },
  // 编译须要编译的文件或目录
  "include": [
    "src",
    "test"
  ],
  // 编译器须要排除的文件或文件夹
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

更多配置请看官网

markdown 编译器和解析器

用法：

只需将 loader 增加到您的配置中，并设置 options。

js 代码里引入 markdown 文件：


// file.js

import md from 'markdown-file.md';

console.log(md);

webpack 配置：

// wenpack.config.js
const marked = require('marked');
const renderer = new marked.Renderer();

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
            {loader: 'html-loader'},
            {
                loader: 'markdown-loader',
                options: {
                    pedantic: true,
                    renderer
                }
            }
        ]
      }
    ],
  },
};

可将文件作为字符串导入

// app.js
import txt from './file.txt';
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

用于解决文件类型资源，如 jpg，png 等图片。返回值为 publicPath 为准

// file.js
import img from './webpack.png';
console.log(img); // 编译后：https://www.tencent.com/webpack_605dc7bf.png
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {name: '[name]_[hash:8].[ext]',
          publicPath: "https://www.tencent.com",
        },
      },
    ],
  },
};

css 文件里的图片门路变成如下：

/* index.less */
.tag {
  background-color: red;
  background-image: url(./webpack.png);
}
/* 编译后：*/
background-image: url(https://www.tencent.com/webpack_605dc7bf.png);

它与 file-loader 作用类似，也是解决图片的，只不过 url-loader 能够设置一个依据图片大小进行不同的操作，如果该图片大小大于指定的大小，则将图片进行打包资源，否则将图片转换为 base64 字符串合并到 js 文件里。

module.exports = {
  module: {
    rules: [
      {test: /\.(png|jpg|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {name: '[name]_[hash:8].[ext]',
              // 这里单位为(b) 10240 => 10kb
              // 这里如果小于 10kb 则转换为 base64 打包进 js 文件，如果大于 10kb 则打包到对应目录
              limit: 10240,
            }
          }
        ]
      }
    ]
  }
}

会把援用的 svg 文件塞到一个个 symbol 中，合并成一个大的 SVG sprite，应用时则通过 SVG 的 \<use> 传入图标 id 后渲染出图标。最初将这个大的 svg 放入 body 中。symbol 的 id 如果不特地指定，就是你的文件名。

该 loader 能够搭配svgo-loader 一起应用，svgo-loader 是 svg 的优化器，它能够删除和批改 SVG 元素，折叠内容，挪动属性等，具体不开展形容。感兴趣的能够移步官网介绍。

* 用处：能够用来开发对立的图标治理库。 *

* 示例代码： *

// js 文件里用法
import webpack from './webpack/webpack.svg';
const type = 'webpack';
const svg =  `<svg>
    <use xlink:href="#${type}"/>
  </svg>`;
const dom = `<div class="tag">
  ${svg}
  </div>`;
document.getElementById('react-app').innerHTML = dom;
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {test: /\.(png|jpg|jpeg)$/,
        use: [
          {
            test: /\.svg$/,
            use: [
                {loader: 'svg-sprite-loader'},
                'svgo-loader'
            ]
          },
        ]
      }
    ]
  }
}

原理：利用 svg 的 symbol 元素，将每个 icon 包裹在 symbol 中，通过 use 应用该 symbol。

通过注入 \<style\> 标签将 CSS 插入到 DOM 中

留神：

如果因为某些起因你须要将 CSS 提取为一个文件(即不要将 CSS 存储在 JS 模块中)，此时你须要应用插件 mini-css-extract-plugin(前面的 Pugin 局部会介绍)；
对于 development 模式 (包含 webpack-dev-server) 你能够应用 style-loader，因为它是通过 \<style>\</style> 标签的形式引入 CSS 的，加载会更快；
不要将 style-loader 和 mini-css-extract-plugin 针对同一个 CSS 模块一起应用！

代码示例见下文 postcss-loader

仅解决 css 的各种加载语法 (@import 和 url() 函数等), 就像 js 解析 import/require() 一样

代码示例见下文 postcss-loader

PostCSS 是一个容许应用 JS 插件转换款式的工具。这些插件能够查看（lint）你的 CSS，反对 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优良的性能。

PostCSS 在业界被宽泛地利用。PostCSS 的 autoprefixer 插件是最风行的 CSS 解决工具之一。

autoprefixer 增加了浏览器前缀，它应用 Can I Use 下面的数据。

装置

npm install postcss-loader autoprefixer --save-dev

代码示例：

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDev = process.NODE_ENV === 'development';
module.exports = {
  module: {
    rules: [
      {test: /\.(css|less)$/,
        exclude: /node_modules/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {importLoaders: 1,}
          },
          {loader: 'postcss-loader'},
          {
              loader: 'less-loader',
              options: {
                  lessOptions: {javascriptEnabled: true}
              }
          }
        ]
      }
    ]
  }
}

而后在我的项目根目录创立 postcss.config.js，并且设置反对哪些浏览器，必须设置反对的浏览器才会主动增加增加浏览器兼容

module.exports = {
  plugins: [require('precss'),
    require('autoprefixer')({
      'browsers': [
        'defaults',
        'not ie < 11',
        'last 2 versions',
        '> 1%',
        'iOS 7',
        'last 3 iOS versions'
      ]
    })
  ]
}

截止到目前，PostCSS 有 200 多个插件。你能够在插件列表或搜寻目录找到它们

理解更多请移步链接

解析 less，转换为 css

代码示例见上文 postcss-loader

理解更多请移步链接

Webpack 就像一条生产线，要通过一系列解决流程后能力将源文件转换成输入后果。这条生产线上的每个解决流程的职责都是繁多的，多个流程之间有存在依赖关系，只有实现以后解决后能力交给下一个流程去解决。插件就像是一个插入到生产线中的一个性能，在特定的机会对生产线上的资源做解决。

Webpack 通过 Tapable 来组织这条简单的生产线。Webpack 在运行过程中会播送事件，插件只须要监听它所关怀的事件，就能退出到这条生产线中，去扭转生产线的运作。Webpack 的事件流机制保障了插件的有序性，使得整个零碎扩展性很好。

——「深入浅出 Webpack」

将曾经存在的单个文件或整个目录复制到构建目录。

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { 
          from: './template/page.html', 
          to: `${__dirname}/output/cp/page.html` 
        },
      ],
    }),
  ],
};

根本作用是生成 html 文件

单页利用能够生成一个 html 入口，多页利用能够配置多个 html-webpack-plugin 实例来生成多个页面入口
为 html 引入内部资源如 script、link，将 entry 配置的相干入口 chunk 以及 mini-css-extract-plugin 抽取的 css 文件插入到基于该插件设置的 template 文件生成的 html 文件外面，具体的形式是 link 插入到 head 中，script 插入到 head 或 body 中。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {news: [path.resolve(__dirname, '../src/news/index.js')],
    video: path.resolve(__dirname, '../src/video/index.js'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'news page',
      // 生成的文件名称 绝对于 webpackConfig.output.path 门路而言
      filename: 'pages/news.html',
      // 生成 filename 的文件模板
      template: path.resolve(__dirname, '../template/news/index.html'),
      chunks: ['news']

    }),
    new HtmlWebpackPlugin({
      title: 'video page',
      // 生成的文件名称
      filename: 'pages/video.html',
      // 生成 filename 的文件模板
      template: path.resolve(__dirname, '../template/video/index.html'),
      chunks: ['video']
    }),
  ]
};

默认状况下，这个插件会删除 webpack 的 output.path 中的所有文件，以及每次胜利从新构建后所有未应用的资源。

这个插件在生产环境用的频率十分高，因为生产环境常常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹十分宏大。

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    plugins: [new CleanWebpackPlugin(),
    ]
};

本插件会将 CSS 提取到独自的文件中，为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件。

// 倡议 mini-css-extract-plugin 与 css-loader 一起应用
// 将 loader 与 plugin 增加到 webpack 配置文件中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],

      }
    ],
  },
};

能够联合上文对于 style-loader 的介绍一起理解该插件。

模块热替换插件，除此之外还被称为 HMR。

该性能会在利用程序运行过程中，替换、增加或删除模块，而无需从新加载整个页面。次要是通过以下几种形式，来显著放慢开发速度:

保留在齐全从新加载页面期间失落的应用程序状态。
只更新变更内容，以节俭贵重的开发工夫。
在源代码中 CSS/JS 产生批改时，会立即在浏览器中进行更新，这简直相当于在浏览器 devtools 间接更改款式。

启动形式有 2 种：

引入插件 webpack.HotModuleReplacementPlugin 并且设置 devServer.hot: true
命令行加 –hot 参数

package.json 配置：


{
  "scripts": {"start": "NODE_ENV=development webpack serve --progress --mode=development --config=scripts/dev.config.js --hot"}
}

webpack 的配置如下：

// scripts/dev.config.js 文件
const webpack = require('webpack');
const path = require('path');
const outputPath = path.resolve(__dirname, './output/public');

module.exports = {
  mode: 'development',
  entry: {
    preview: [
      './node_modules/webpack-dev-server/client/index.js?path=http://localhost:9000',
      path.resolve(__dirname, '../src/preview/index.js')
    ],
  },
  output: {filename: 'static/js/[name]/index.js',
    // 动静生成的 chunk 在输入时的文件名称
    chunkFilename: 'static/js/[name]/chunk_[chunkhash].js',
    path: outputPath
  },
  plugins: [
    // 大多数状况下不须要任何配置
    new webpack.HotModuleReplacementPlugin(),],
  devServer: {
        // 仅在须要提供动态文件时才进行配置
        contentBase: outputPath,
        // publicPath: '', // 值默认为'/'
        compress: true,
        port: 9000,
        watchContentBase: true,
        hot: true,
        // 在服务器启动后关上浏览器
        open: true,
        // 指定关上浏览器时要浏览的页面
        openPage: ['pages/preview.html'],
        // 将产生的文件写入硬盘。写入地位为 output.path 配置的目录
        writeToDisk: true,
    }
}

留神：HMR 相对不能被用在生产环境。

创立一个在编译时能够配置的全局常量。这会对开发模式和生产模式的构建容许不同的行为十分有用。

因为这个插件间接执行文本替换，给定的值必须蕴含字符串自身内的理论引号。

通常，有两种形式来达到这个成果，应用 '”production”‘, 或者应用 JSON.stringify(‘production’)

// webpack.config.js
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      PAGE_URL: JSON.stringify(isProd
        ? 'https://www.tencent.com/page'
        : 'http://testsite.tencent.com/page'
      )
    }),
  ]
}

// 代码外面间接应用
console.log(PAGE_URL);

能够看到我的项目各模块的大小，能够按需优化. 一个 webpack 的 bundle 文件剖析工具，将 bundle 文件以可交互缩放的 treemap 的模式展现。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()
  ]
}

启动服务：

生产环境查看：NODE_ENV=production npm run build
开发环境查看：NODE_ENV=development npm run start

最终成果：

理解更多请移步链接

代码宰割。


const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  optimization: {
    splitChunks: {
      // 分隔符
      // automaticNameDelimiter: '~',
      // all, async, and initial
      chunks: 'all',
      // 它能够继承 / 笼罩下面 splitChunks 中所有的参数值，除此之外还额定提供了三个配置，别离为：test, priority 和 reuseExistingChunk
      cacheGroups: {
        vendors: {
          // 示意要过滤 modules，默认为所有的 modules，可匹配模块门路或 chunk 名字，当匹配的是 chunk 名字的时候，其外面的所有 modules 都会选中
          test: /[\\/]node_modules\/antd\//,
          // priority：示意抽取权重，数字越大示意优先级越高。因为一个 module 可能会满足多个 cacheGroups 的条件，那么抽取到哪个就由权重最高的说了算；// priority: 3,
          // reuseExistingChunk：示意是否应用已有的 chunk，如果为 true 则示意如果以后的 chunk 蕴含的模块曾经被抽取进来了，那么将不会从新生成新的。reuseExistingChunk: true,
          name: 'antd'
        }
      }
    }
  },
}

关于前端:吐血整理的webpack入门知识及常用loader和plugin

Webpack 简介

Webpack 一些外围概念：

Webpack 的作用

Loader

简介

loader 特点

代码构造

罕用的 Loader

1. babel-loader

2. ts-loader

3. markdown-loader

4. raw-loader

5. file-loader

6. url-loader:

7. svg-sprite-loader

8. style-loader

9. css-loader

10. postcss-loader

11. less-loader

Plugin

Plugin 简介

罕用 Plugin

1. copy-webpack-plugin

2. html-webpack-plugin

3. clean-webpack-plugin

4. mini-css-extract-plugin

5. webpack.HotModuleReplacementPlugin

6. webpack.DefinePlugin

7. webpack-bundle-analyzer

8. SplitChunksPlugin

Just My Socks（注册教程内含优惠码）

关于前端:吐血整理的webpack入门知识及常用loader和plugin

Webpack 简介

Webpack 一些外围概念：

Webpack 的作用

Loader

简介

loader 特点

代码构造

罕用的 Loader

1. babel-loader

2. ts-loader

3. markdown-loader

4. raw-loader

5. file-loader

6. url-loader:

7. svg-sprite-loader

8. style-loader

9. css-loader

10. postcss-loader

11. less-loader

Plugin

Plugin 简介

罕用 Plugin

1. copy-webpack-plugin

2. html-webpack-plugin

3. clean-webpack-plugin

4. mini-css-extract-plugin

5. webpack.HotModuleReplacementPlugin

6. webpack.DefinePlugin

7. webpack-bundle-analyzer

8. SplitChunksPlugin

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）