乐趣区

关于前端:分享15个Webpack实用的插件

作者：

jiezi

在

前言

初衷： 分享一下工作中实用的几个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

用处： 丑化控制台，良好的提醒谬误,。咱们不想本人的终端启动乱哄哄的，比方这样

装置

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
}

运行完下面代码。看如下后果

感激

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤

往期好文

《手把手教你写一个Vue组件公布到npm且可外链引入应用》

《分享12个Webpack中罕用的Loader》

《聊聊什么是CommonJs和Es Module及它们的区别》

《带你轻松了解数据结构之Map》

《这些工作中用到的JavaScript小技巧你都晓得吗？》

《【倡议珍藏】分享一些工作中罕用的Git命令及非凡问题场景怎么解决》

《你真的理解ES6中的函数个性么？》

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章