分享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-loaderuse里面是提取时使用css-loader进行转换,plugins里面的配置filename是最后合并完的.css文件名称,当allChunksfalse时,只会提取初始化时的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.SplitChunkswebpack4之后推荐使用的

安装

内置的,不需要安装。

配置

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"
        }
    },
}

上面配置中,splitChunkschunksall是对所有的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实用的插件!!!

 

Javascript 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
vue.js组件之间传递数据的方法
Jul 10 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
js实现鼠标拖曳效果
Dec 30 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如何优雅的实现移动端登录注册模块
You might like
php 无限级 SelectTree 类
2009/05/19 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
图解js图片轮播效果
2015/12/20 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python中setuptools的作用是什么
2020/06/19 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
办理暂住证介绍信
2014/01/11 职场文书
小学英语教学反思
2014/01/30 职场文书
批评与自我批评材料
2014/02/15 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android