webpack 常用的插件列表-[七日打卡4]

一、webpack 常用的插件列表

本文通过几个例子演示常用的webpack插件的作用以及使用方式，从而加深对webpack的理解。

说明：本文是基于webpack 4.x进行的实验。

为了方便演示和验证，我们首先需要搭建一套实验环境，通过以下命令安装依赖的工具包：

# 安装 webpack 和 webpack-cli
$ npm i webpack webpack-cli -D

webpack是模块打包器，可以把资源打包成javascript资源；webpack-cli是webpack的命令行接口，可以通过命令行的方式读取配置文件，方便开发者使用。

说明：在npm中，-D是--save-dev的简写，类似的常见的简写如：-S是--save的简写。

1. 清除输出目录

通常会在项目打包之前清除dist目录，避免生成重复的产物文件。其中最直接粗暴的做法是可以通过 shell 命令 rm -rf dist进行清除，用起来虽然简单，但是缺点就是在windows平台上会报错，有不兼容的情况，因为windows下的命令行中不支持rm命令。所以我们这里推荐使用webpack 插件的形式实现清除dist目录的效果。

首先需要安装 clean-webpack-plugin：

# 安装 
$ npm i clean-webpack-plugin -D

然后需要配置：

// webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 使用
plugins: [
    new CleanWebpackPlugin()
]

此外还可以使用一个rimraf的工具,一个用于执行深度删除操作的 node.js 工具包，有点像shell命令rm -rf <path>，感兴趣的朋友可以尝试下。

2. 复制 public 资源

# 安装 
$ npm install --save-dev copy-webpack-plugin

www.webpackjs.com/plugins/cop…

3. html-webpack-plugin

github.com/jantimon/ht…

首先需要安装依赖：

# 安装
$ npm install --save-dev html-webpack-plugin
$ npm install --save-dev html-webpack-inline-source-plugin

然后需要配置：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用
plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './index.html'
    }),
]

4. webpack-dev-server

github.com/webpack/web…

webpack-dev-server 在开发阶段提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。内部用的是webpack-dev-middleware实现的，它能给webpack中的资源够提供速度超快的内存级别访问。

安装

$ npm i webpack-dev-server --save-dev

// webpack.config.js
devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
},

由于webpack的资源都是基于内存级别编译的，没有写磁盘，所以无法看到资源实际存放的路径。但是通过下面这个地址可以访问到内存中的路径：http://localhost:9000/webpack-dev-server。有些时候用来分析资源文件很管用。

除此之外还可以使用devServer.writeToDisk: true 或者 write-file-webpack-plugin 实现文件写磁盘。

5. 静态资源如何内联

什么是资源内联？

资源内联（inline-resource），就是将一个资源以内联的方式嵌入到另一个资源内。

资源内联的优点

代码层面
- css 内联可以避免页面闪动
- js 统计打点上报相关
- 页面框架初始化脚本
请求层面
- 减少HTTP网络请求数量
- 图片或者字体内联，减少资源引用数量

内联的形式

js 内联
css 内联
image/font 内联

举个栗子

1）使用 raw-loader 实现 lib-flexible.js 内联

A loader for webpack that allows importing files as a String

raw-loader 的作用就是把资源当做字符串导入的。

// 导入html作为字符串
<%= require('raw-loader!./meta.html').default %>

// 导入css
<style>
    <%= require('!raw-loader!./style.css').default %>
</style>

// 导入js
<script>
    // https://github.com/webpack-contrib/raw-loader/issues/72
    <%= require('!raw-loader!./node_modules/lib-flexible/flexible.js').default %>
</script>

使用 url-loader 把文件转成base64形式的URI。

6. 单独抽取css

这个插件 mini-css-extract-plugin 可以把 css 抽离成为独立的CSS文件。

安装

$ npm install --save-dev mini-css-extract-plugin

配置

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

效果

未完待续