插件使用01

最后更新于:2022-04-02 05:32:29

[TOC]

前言

通过本文你将熟悉并掌握webpack中常用的插件的使用以及其配置。

概念解读

插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。

插件与loader区别

> Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程起作用。

使用插件的方法

要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)继续上面的例子,我们添加了一个给打包后代码添加版权声明的插件。

//安装插件
npm install html-webpack-plugin -D 
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
//插件中配置
module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(),
  ],
}

常用插件枚举

HtmlWebpackPlugin

主要用于依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。有了这个插件,我们便可以实现打包完成之后将资源路径注入到页面之中。(默认是吧output的文件注入到页面底部)

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: 'assets/index.html', // 配置文件模板
    }),
  ],

vue-cli 中的相关插件使用:

//dev配置
 new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
//prod配置
   new HtmlWebpackPlugin({
            filename: config.prod.index,
            template: 'index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency',
        }),

常用的配置api如下:其他的如果需要可以去查看文档

字段 类型 默认 备注
filename string index.html 脚本或者样式注入文件的位置,也可以自己写
template string - 模板页面的位置
inject boolean /string true true或者body的时候,传到底部,如果是head,加载到顶部
minify boolean/string true 可以控制一些压缩页面的参数,比如去除注释,换行,属性引号
chunksSortMode {String|Function} auto 'none' | 'auto' | 'dependency' | 'manual' | {Function}可以决定chunk压缩的模式
chunks {?} 允许只加入一些chunk
cache boolean true 只在文件发生改变的时候触发,否则使用缓存
title string '' 生成页面使用的标题

webpack.DefinePlugin

定义插件,webpack自带的插件,允许你创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。比如,你可能会用一个全局的常量来决定 log 在开发模式触发而不是发布模式。这仅仅是 DefinePlugin 提供的便利的一个场景。

另外我们也可以添加另外的一些api请求地址,转发地址等,这样就不用额外引入配置文件的部分了。只要你有这样的场景,就去使用吧。

注意事项 :因为这个插件直接做的文本替换,给定的值必须包含字符串本身内的实际引号。通常,有两种方式来达到这个效果,使用 '"production"', 或者使用 JSON.stringify('production')。

//基本语法 
new webpack.DefinePlugin(definitions)
//示例,建议定义的字段大写
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

  • 案例一 :定义开发和生产环境的标志

    new webpack.DefinePlugin({
    'NICE_FEATURE': JSON.stringify(true),
    'EXPERIMENTAL_FEATURE': JSON.stringify(false)
    })
    
  • 案例 二 :定义你需要的web路径,api地址

 new webpack.DefinePlugin({
      'process.env': env,
    'PROXY_WEB_PATH': config.build.PROXY_WEB_PATH,
    'STATIC_WEB_PATH': config.build.STATIC_WEB_PATH,
    'WAP_PATH': config.build.WAP_PATH,
    }),

定义插件介绍

webpack.optimize.UglifyJsPlugin

webpack内置集成的压缩js的插件,模块地址:https://npm.taobao.org/package/uglifyjs-webpack-plugin

基本使用:

//安装
npm i -D uglifyjs-webpack-plugin
//使用
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

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

vue-cli中的配置使用 :

  new webpack.optimize.UglifyJsPlugin({
            compress: {
                 warnings: false,
        drop_console: true,
        unused: false,
        properties: false
            },
            sourceMap: false,
            comments:false
        }),

基本常用api介绍:

参数 类型 默认 备注

版权插件的实例

备注:这个插件是webpack内置的,直接使用就好。追加这个之后就会在打包之后的文件头部追加需要的文字说明。

     var webpack=require("webpack");

     module.exports={
        plugins:[
         new webpack.BannerPlugin("版权有责,翻版必究(xx技术部)")
        ]
     }

    // 最终生成的文字说明
    /*! 版权所有,翻版必究(xx技术部) */
';