[Webpack并不难]使用教程(三)--- plugins

徒步上山看日出
使用教程(一)--- entry,devtool,output,resolve
使用教程(二)--- module.loaders
Webpack版本 3.10.0

Plugins (官方的文档)

  • 上一篇讲到的 loader 是被用来转换某些类型的模块,它则可以用来做更广泛的任务。
  • 如:模板编译输出,捆绑优化,定义类似环境变量等等。
plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
  ]
  1. plugins: 数组形式包住一个个 plugin 实例。
  2. 每个插件实例是一个具有 apply 属性的 js 对象 (Function.prototype.apply)。

    const webpack = require('webpack');
    const configuration = require('./webpack.config.js');
    let compiler = webpack(configuration);
    
    function HelloWorldPlugin (options) {
    // do something...
    }
    
    // this 指向了 compiler。
    HelloWorldPlugin.prototype.apply = function (compiler) {
    // compiler.plugin(),可看作绑定事件,打包时会触发事件。
    compiler.plugin('run', function() { 
        console.log('hello world!')
    });
    };
  3. 每个插件都有自身 options(配置)。
  4. 下面说下常见的 plugin

webpack.DefinePlugin (官方的文档)

  • webpack.xxxxPlugin 这种插件是 webpack 的内置插件。
  • DefinePlugin:它的作用是定义全局常量,是常量。即在模块用它定义的全局常量,那么你就不能改变它的值啦。用法例子:

    //webpack.config.js 
    Plugins: [
        new webpack.DefinePlugin({
            '_ABC_': false
        })
    ]
    
    // 在某个要打包的js模块里
    if (_ABC_){
        console.log('_ABC_是 true,才看得见这输出');
    }

webpack.HotModuleReplacementPlugin (官方的文档)

  • 它是热模块更换(HMR) 。在应用程序运行时交换,添加或删除模块,而无需完全重新加载。
  • 它的options:
配置属性 数据类型 作用
multiStep Boolean 如果 true 插件将分两步建立。首先编译常更新的模块,然后编译剩余的普通资源。
fullBuildTimeout Number multiSteptrue,启用两步之间的延迟。
requestTimeout Number 下载某些东西的超时时间

官方讲,这些 options 可能会被弃用 ,就 new webpack.HotModuleReplacementPlugin() 就可以了。

webpack.NoEmitOnErrorsPlugin (官方的文档)

  • 它的作用:跳过编译时出错的代码并记录,使编译后运行时的包不会发生错误。

webpack.optimize.DedupePlugin (官方的文档)

  • 项目中会有很多模块,有些模块之间存在相同的依赖,那么它的作用是把重复的依赖删除掉。
  • 例如 A 模块和 B 模块都依赖lodash.js,那么就留在一个 lodash.js ,多余的删除。

webpack.ProvidePlugin (官方的文档)

  • 会自动加载模块,不用 import / require 导入都可用。
Plugins: [
    $: 'jquery'
]
// 不用导入 jquery ,都可用 $。
// 可以理解为在全局就 import $ from 'jquery' 或 const $ = require('jquery')

HtmlWebpackPlugin --第三方插件 (官方的文档

  • 根据你提供的 html 模板 生成 html
  • 因为是第三方插件,需要安装,导入使用。
// 安装
npm install --save-dev html-webpack-plugin

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

// 使用
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
  ... // 其他配置,可看下面。
 })
  1. filename: 生成的文件名。可以带路径。
  2. templatehtml 模板路径。
  3. inject'true' | 'head' | 'body' | 'false'

    • true:将所有资源( jscss 等等)注入模板,js 资源在注入 htmlbody 底部。
    • body: 将所有 js 资源注入 htmlbody 底部。
    • head:将 js 资源放在 htmlhead
  4. hash'true' | 'false'。 如果为 truewebpack 打包后,所有 jscss 都会带有 hash 值。这对缓存清除非常有用。
  5. minify{...} | 'false'
    {...}:通过 html-minifier 的选项对象,来减小打包后文件的大小。在生产环境一般用到。看看里面一般用到什么吧。

    • collapseWhitespace:'true' | 'false'
      可以理解为如果 true ,则减少html 中节点与节点之间的空白区域。用于优化 html
    • removeComments: 如果 true ,则去掉 html 里的注释。
    • removeAttributeQuotes:如果 true ,则尽可能地去掉 html 里标签元素属性的引号,有些特定属性则不会。( 请注意,HTML规范建议始终使用引号。谨慎使用这选项

      <p id="abc" title="hello world"></P>
      转换为:
      <p id=abc title="hello world"></p>
      // 可见有些特定的属性是不会去掉引号的。
  6. chunksSortMode'none' | 'auto' | 'dependency' |'manual' | {function}
    作用:对注入 html 中的 js 模块进行排序。默认:'auto' (自动排序)

    • auto: 默认,自动排序。
    • none: 不排序 。
    • dependency: 按依赖排序。
    • manual: 手动排序。
    • {function}: 按你传入函数的功能进行排序。
  7. 以上是常见的,还有其他的,想了解可以看下官方文档哦。

plugins 就讲到这里了,以上都是一些常见常用的插件,喜欢的朋友可以点波赞,谢谢啦。

使用教程四

阅读 4.2k

求索之路漫漫
这里分享技术的个人心得,总有一遍适合你。没有?那下次来会有得了。写的每一篇文章,都是很用心的!希...

黑夜給了我黑色的眼睛,我卻用來尋找光明。

530 声望
25 粉丝
0 条评论

黑夜給了我黑色的眼睛,我卻用來尋找光明。

530 声望
25 粉丝
宣传栏