首页
所有分类
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之文件操作
Mar 07 Javascript
Javascript &amp; DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例
Jun 02 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
vue过滤器用法实例分析
Mar 15 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如何优雅的实现移动端登录注册模块
most_common(1) Xpath(1) pip(1) frozenset(1) Next.js(1) 字典(3) Counter(1) 并发(8) set(1) SingleFlight(2)
You might like
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
在Python中使用元类的教程
2015/04/28 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
numpy.where() 用法详解
2019/05/27 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国体育用品商店：Rally House（NCAA、NFL、MLB、NBA、NHL和MLS）
2018/01/03 全球购物
Vertbaudet西班牙网上商店：婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
印度在线购买电子产品网站：Croma
2020/01/02 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
法律进机关实施方案
2014/03/12 职场文书
排查整治工作方案
2014/06/09 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
应聘教师自荐信
2015/03/26 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android