关于前端:分享15个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接管一个对象，外面自行进行配置，具体参见这里

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

装置

cnpm i clean-webpack-plugin -D

配置

webpack.config.js

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

用处： 将 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 文件。

用处： 该插件与下面的 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 不同，来看一下它们的区别。

loader配置没有fallback
在 plugin 中设置 filename 同步加载资源名称，还要指定异步加载 css 资源chunkFilename
该插件反对配置 publicPath 用来设置异步加载 css 的门路
exract-text-webpack-plugin只会提取一个 css 文件，mini-css-extract-plugin会依据异步文件提取进去。

用处： 用于将页面里的公共代码提取进去，从而进行优化加载速度，该 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 就再次打包也不会变动，能够走浏览器缓存

用处： 该性能与下面的 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

用处： 用于注入全局变量，个别用在环境变量上。

装置

无需装置，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值必须是一个变量或代码片段。

用处： 用于定义全局变量，如 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 这个属性就是实体对象

用处： 开启热模块更新

装置

无需装置，webpack 内置

配置

webpack.config.js

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

用处： 用于过滤打包文件，缩小打包体积大小。

装置

无需装置，webpack 内置

配置

webpack.config.js

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

用处： 用于压缩 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/
            })
        ]
    }
}

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

装置

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 目录。

用处： 用于压缩 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(),
    ]
}

用处： 用于压缩图片

装置

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 
        })
    ]
}

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

装置

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 中的函数个性么？》

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

前言

html-webpack-plugin

clean-webpack-plugin

extract-text-webpack-plugin

mini-css-extract-plugin

webpack.optimize.CommonsChunkPlugin

optimization.SplitChunks

DefinePlugin

ProvidePlugin

hot-module-replacement-plugin

IgnorePlugin

uglifyjs-webpack-plugin

copy-webpack-plugin

optimize-css-assets-webpack-plugin

imagemin-webpack-plugin

friendly-errors-webpack-plugin

感激

往期好文