首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

分享15个Webpack实用的插件！！！

Posted in Javascript onMarch 31, 2021

前言

初衷： 分享一下工作中实用的几个Plugin，希望对大家有些帮助。

html-webpack-plugin

用途： 将一个页面模板打包到dist目录下，默认都是自动引入js or css

安装

cnpm i html-webpack-plugin@3.2.0 -D

配置

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  // 以咱们本地的index.html文件为基础模板
            filename: "index.html",  // 输出到dist目录下的文件名称
        }),
    ]
}

HtmlWebpackPlugin接收一个对象，里面自行进行配置，详细参见这里

clean-webpack-plugin

用途： 用于每次打包dist目录删除

安装

cnpm i clean-webpack-plugin -D

配置

webpack.config.js

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

extract-text-webpack-plugin

用途： 将css样式从js文件中提取出来最终合成一个css文件，该插件只支持webpack4之前的版本，如果你当前是webpack4及以上版本那么就会报错。

安装

cnpm i extract-text-webpack-plugin -D

配置

webpack.config.js

const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: "style-loader", 
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new extractTextPlugin({
            filename: "[name].css",
            allChunks: true
        })
    ]
}

上面配置中，extractTextPlugin.extract里面参数fallback是当提取不成功时，就执行style-loader。use里面是提取时使用css-loader进行转换，plugins里面的配置filename是最后合并完的.css文件名称，当allChunks为false时，只会提取初始化时的css文件，为true时会提取异步的css文件。

mini-css-extract-plugin

用途： 该插件与上面的exract-text-webpack-plugin的一样，都是将css样式提取出来, 唯一就是用法不同，本插件的webpack4版本之后推荐使用

安装

cnpm i mini-css-extract-plugin -D

配置

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                   MiniCssExtractPlugin.loader,
                   "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[name].css"
        })
    ]
}

上面配置中，可以看到用法与exract-text-webpack-plugin不同，来看一下它们的区别。

  1. loader配置没有fallback
  2. 在plugin中设置filename同步加载资源名称，还要指定异步加载css资源chunkFilename
  3. 该插件支持配置publicPath用来设置异步加载css的路径
  4. exract-text-webpack-plugin只会提取一个css文件，mini-css-extract-plugin会根据异步文件提取出来。

webpack.optimize.CommonsChunkPlugin

用途： 用于将页面里的公共代码提取出来，从而进行优化加载速度，该CommonsChunkPlugin只支持Webpack4之前。

安装

该插件是Webpack内置的，不需要安装。

配置

main.js

import Vue from "vue"

webpack.config.js

module.exports = {
    entry: {
        main: "./main.js",
        vendor: ["Vue"]
    },
    plugins: [
        new Webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "[name].js"
        }),
        new Webpack.optimize.CommonsChunkPlugin({
            name: "common",
            chunks: ["vendor"],
            filename: "[name].js"
        })
    ]
}

上面配置中，我们把main.js及它里面的依赖文件把Vue.js提取出来进行优化，避免每次打包或者每次访问其它页面都加载一个该js文件, 我们先是把Vue基础环境提取出来，因为基础环境它几乎不会改变，从而进行提取优化是必须的。再把Webpack运行时的代码也提取出来, 这样vendor就再次打包也不会变化，可以走浏览器缓存

optimization.SplitChunks

用途： 该功能与上面的webpack.optimize.CommonsChunkPlugin一样，只不过optimization.SplitChunks是webpack4之后推荐使用的

安装

内置的，不需要安装。

配置

main.js

import Vue from "vue"
console.log(Vue)
import("./news")

news.js

import Vue from "vue"
console.log(Vue)

webpack.config.js

module.exports = {
    mode: "development",
    entry: {
        main: "./main.js"
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/dist"
    },
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },
}

上面配置中，splitChunks的chunks为all是对所有的chunk都生效，默认只对async异步有效。

splitChunks默认情况下也有自动提取，默认要求如下：

  • 被提取的模块来自node_module目录
  • 模块大于30kb
  • 按需加载时请求资源最大值小于等于5
  • 首次加载时并行请求最大值小于等于3

DefinePlugin

用途： 用于注入全局变量，一般用在环境变量上。

安装

无需安装，webpack内置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.DefinePlugin({
           STR: JSON.stringify("蛙人"),
           "process.env": JSON.stringify("dev"),
            name: "蛙人"
        })
    ]
}

上面配置中，DefinePlugin接收一个对象，里面的key值对应一个value值，这个value值是一个代码片段，可以看上面name那个，会报错 蛙人 is not defined，这里需要注意，value值必须是一个变量或代码片段。

ProvidePlugin

用途： 用于定义全局变量，如100个页面都引入vue，每个页面都引入只会增加工作量，直接在webpackProvide挂载一个变量就行，不用再去一一引入。

安装

无需安装，webpack内置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.ProvidePlugin({
            "Vue": ["vue", "default"] 
        })
    ]
}

上面配置中，ProvidePlugin接收一个对象，key值是使用的变量，value值第一个参数是Vue模块，第二个参数默认取Es Module.default的属性。import默认引入进来是一个 Es Module的对象，里面有default这个属性就是实体对象

hot-module-replacement-plugin

用途： 开启热模块更新

安装

无需安装，webpack内置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.HotModuleReplacementPlugin()
    ]
}

IgnorePlugin

用途： 用于过滤打包文件，减少打包体积大小。

安装

无需安装，webpack内置

配置

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    plugins: [
        new Webpack.IgnorePlugin(/.\/lib/, /element-ui/)
    ]
}

uglifyjs-webpack-plugin

用途： 用于压缩js文件，针对webpack4版本以上。

安装

cnpm install uglifyjs-webpack-plugin -D

配置

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
	optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
                exclude: /node_modules/
            })
        ]
    }
}

copy-webpack-plugin

用途： 用于将文件拷贝到某个目录下

安装

cnpm i  copy-webpack-plugin@6.4.1 -D

配置

webpack.config.js

const CopyWebpackPlugin=require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "./main.js",
                    to: __dirname + "/dist/js",
                    toType: "dir"
                }
            ]
        })
    ]
}

上面配置中，将main.js拷贝到dist目录下的js里，toType默认是file，也可以设置为dir，因为我这dist目录下没有js目录。

optimize-css-assets-webpack-plugin

用途： 用于压缩css样式

安装

cnpm i optimize-css-assets-webpack-plugin -D

配置

webpack.config.js

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
    plugins: [
        new OptimizeCssAssetsWebpackPlugin(),
    ]
}

imagemin-webpack-plugin

用途： 用于压缩图片

安装

cnpm i imagemin-webpack-plugin -D

配置

webpack.config.js

const ImageminPlugin =  require('imagemin-webpack-plugin').default
module.exports = {
    plugins: [
        new ImageminPlugin({
             test: /\.(jpe?g|png|gif|svg)$/i 
        })
    ]
}

friendly-errors-webpack-plugin

用途： 美化控制台，良好的提示错误,。我们不想自己的终端启动乱糟糟的，比如这样

分享15个Webpack实用的插件！！！

安装

cnpm i friendly-errors-webpack-plugin -D

配置

webpack.config.js

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const devServer =  {
    publicPath: "/",
    port: 9527,
    host: "localhost",
    open: true,
    hotOnly: true,
    stats: 'errors-only'
}
module.exports = {
	plugins: [
		new FriendlyErrorsWebpackPlugin({
			compilationSuccessInfo: {
                notes: ['蛙人你好，系统正运行在http://localhost:' + devServer.port]
            },
            clearConsole: true,
		})
	],
	devServer
}

运行完上面代码。看如下结果

分享15个Webpack实用的插件！！！

 

分享15个Webpack实用的插件！！！

- Author -

小小蛙人

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
node.js连接mysql与基本用法示例
Jan 05 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
JS继承最简单的理解方式
Mar 31 #Javascript
javaScript Array api梳理
Mar 31 #Javascript
抖音短视频(douyin)去水印工具的实现代码
Nest.js参数校验和自定义返回数据格式详解
Mar 29 #Javascript
Angular CLI发布路径的配置项浅析
Mar 29 #Javascript
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
translation(2) 读取(1) 查找算法(1) decorator(1) 数据保存(1) 网页解析(1) bs4(1) 矩阵(1) 数组(5) 装饰器(1)
You might like
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
神奇！js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址（80）
2017/09/18 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python多项式回归的实现方法
2019/03/11 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python图片处理模块PIL操作方法（pillow）
2020/04/07 Python
如何在Python对Excel进行读取
2020/06/04 Python
中年人生感言
2014/02/04 职场文书
大学运动会入场词
2014/02/22 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
店长岗位职责
2015/02/11 职场文书
同事离别感言
2015/08/04 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python