webpack插件指南

webpack 有着丰富的插件接口。webpack 自身的多数功能都使用插件接口。插件接口使 webpack 变得极其灵活。使用一些配置文件能减少不少工作量，下面就来总结一些常用的插件。

1.创建html文件

在单页面项目中，可以使用HtmlWebpackPlugin方便的创建html文件，并可以将webpack输出的文件在html中自动使用<script>引入到文件中。

  • 安装
npm install --save-dev html-webpack-plugin
  • 配置
    首先需要通过require来引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

然后添加在plugins中。

plugins: [new HtmlWebpackPlugin()]

执行npm run build后，将生成一个index.html文件在dist目录下。

  • 属性设置
  • title：用于设置html文件的标题。
  • filename：用于设置html文件的名称，默认为index.html。
  • template：设置模板文件后，html文件根据模板来生成。除了设置html模板，还可以设置ejs,pug等模板。
  • templateParameters：用于设置模板的参数，比如使用设置一个foo参数，在ejs模板中使用<%= foo %>，生成的html文件将显示foo参数的内容。
  • inject：自动插入脚本到html中。
  • favicon：icon路径。
  • meta：设置meta信息，配置项为一个对象，在对象中设置相关的meta。
  • minify：是否压缩html代码。可以通过配置一些选项来设置html的压缩方式。collapseWhitespace用于清理html中的空行和空白符，将html压缩成一行。
    removeComments：删除注释,删除的注释将显示成空行。
    removeRedundantAttributes：删除多余的属性。删除多余的属性。
    removeScriptTypeAttributes：删除script中的type属性。
    removeStyleLinkTypeAttributes：删除style标签中的type属性。
    useShortDoctype：使用短的文档类型。
  • hash：给引入的css,js文件添加hash值，如</script><script src="app.bundle.js?ce88277a1573d296df97"></script>
  • cache：是否缓存。
  • showErrors： 编译到html中时，有错误时显示错误详情。
  • chunks：有多个入口文件时，指定入口文件引入到html中，如：chunks: ['index']，只引入index.js文件。
  • excludeChunks：排队指定文件无需引入到html中。

相关的配置信息如下所示：

new HtmlWebpackPlugin({
            title:'webpack 学习',
            filename: 'index.html',
            template: 'src/index.ejs',
            templateParameters:{'foo': 'bar'},
            inject:true,
            meta:{
                viewport:'width=device-width, initial-scale=1, shrink-to-fit=no'
            },
            minify:{
                collapseWhitespace: false,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            },
            hash:true,
            cache:false,
            showErrors:true,
            chunks: ['index']
        })

2.清理构建目录

在开发的时候，可能会经常生成一些没用的文件在dist目录下，但发布的时候又不想使用这些文件，所在就得先清理，然后再生产实际用到的文件，主要是通过clean-webpack-plugin来清理无用的文件。

  • 安装
npm install clean-webpack-plugin --save-dev
  • 配置
    首先进行引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

plugins: [
        new CleanWebpackPlugin()
    ]

3.提取css文件

webpack加载css后，打包的是默认将css文件一起打包的，为了减少打包文件的大小，可以使用mini-css-extract-plugin插件，将css文件抽取出来。webpack4以前使用的是extract-text-webpack-plugin插件

  • 安装
npm install --save-dev mini-css-extract-plugin
  • 配置
    首先进行引入
const ExtractTextPlugin = require("mini-css-extract-plugin");

plugins: [
    new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css',
        })
  ]

通过设置好配置后，将分离出css文件，虽然能单独提取出来，但代码是没有经过压缩的。需要使用optimize-css-assets-webpack-plugin插件进行css压缩。
先安装该插件。

 npm install --save-dev optimize-css-assets-webpack-plugin
  • 引入
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  • 配置
module.exports = {
optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})],
    }
}

默认情况下对每个包含css的js文件都会创建一个css文件，支持按需加载css和sourceMap。但为了方便加载，需要将所有css文件提取到同一个css文件中。使用optimization.splitChunks.cacheGroups可以将css文件提取到一个文件中。需要进行如下的配置：

module.exports = {
optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})],
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    }
}

new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
        })

4.css自动添加浏览器前缀

在写css的时候，经常会碰到一些兼容性的问题，总是忘记给一些css3的属性忘记添加了浏览器前缀，使用postcss-loader autoprefixer postcss等插件和转换器，可以处理浏览器兼容，将自动补全浏览器前缀

  • 安装
npm install --save-dev  postcss-loader autoprefixer postcss
  • 配置
{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ],
            },

配置好后，生成的css文件中css3属性将自动补全前缀。
参考文章

  • browsers
    autoprefixer中可以设置browsers来兼容指定的游览器。可以设置相关的参数来进行配置。

defaults：默认的浏览器列表 (> 0.5%, last 2 versions, Firefox ESR, not dead)。
> 0.5%：指全球有超过0.5%的人使用的浏览器。
last 2 versions：所有浏览器兼容到最新的两个版本。
> 5% in US：指定国家使用游览器的比例。
ie 6-8：指定IE浏览器的版本范围。
Firefox > 20 ：指定浏览器的版本范围。
Firefox ESR：浏览器最新版本。
iOS 7：iOS系统最低支持iOS 7。
since 2015 or last 2 years ：2015之后的所有版本或者最近两年发布的版本。
last 2 Chrome versions：指定浏览器最近的几个版本。
not ie <= 8：排除指定范围的浏览器。
unreleased versions：所有浏览器的测试版本。
unreleased Chrome versions：指定浏览器的测试版本。

5.px转rem

在移动端，为了适配不同分辨率的手机，采用的像素单位是'rem',而在写代码的时候，用的都是px,为了将px自动转成'rem,可以借助postcss-px2rem`插件来自动完成。

  • 安装
 npm install --save-dev postcss-px2rem
  • 配置
{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-px2rem')({remUnit: 75}),
                                require('autoprefixer')({
                                    browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ],
            }

还需要在html中添加根font-size的大小,代码如下所示：

<script>
    document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px';
    window.addEventListener("resize",()=>{
        document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth ||  document.body.clientWidth) /10 + 'px';
    });
</script>

6.JS代码压缩

使用webpack打包时，可以使用UglifyjsWebpackPlugin插件对JS代码进行压缩。

  • 安装
npm i -D uglifyjs-webpack-plugin
  • 引入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  • 配置
module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}
  • 配置选项介绍

test：用于设置匹配js文件的正则表达式。
include：包含指定文件的正则表达式。
exclude：排队指定文件的正则表达式。
** cache：是否进行缓存。
** parallel：是否启动并行压缩。
** sourceMap：是否开启sourceMap。
** extractComments：提取注释文件。
uglifyOptions：ie8设置是否兼容ie8。ecma设置es的版本。

7.拷贝文件

webpack默认情况下是要将所有的代码、图片、文件等当作模块来处理，并进行打包压缩的，如果有时候需要指定一些文件不需要打包，比如static目录下的文件不需要进行打包时，可以使用copy-webpack-plugin插件将文件复制到指定的目录下。

  • 安装
npm install --save-dev copy-webpack-plugin
  • 引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
  • 配置
new CopyWebpackPlugin([
            {
                from: __dirname +'/static',
                to:__dirname + '/dist/static'
            }
        ])

-配置选项介绍

from：需要拷贝的文件。
to：目标目录。
ignore：忽略的文件。
toType：拷贝后的文件类型，包括dir，file，template三种类型。
** test：匹配文件的正则表达式。
** flatten：删除目录，只拷贝文件。

8.提取公共资源

在使用webpack打包的时候，可以对一些公用的代码进行分离，将其抽取出来，以减少打包后文件的大小，就需要用到html-webpack-externals-plugin插件来提取公共资源了。

  • 安装
npm install --save-dev html-webpack-externals-plugin
  • 引入
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
  • 配置
new HtmlWebpackExternalsPlugin({
            externals: [
                {
                    module: 'jquery',
                    entry: 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js',
                    global: 'jQuery',
                },
            ],
        })

也可以使用官方的SplitChunksPlugin插件进行分离。

总结

webpack插件相关的信息先介绍到这里了，使用插件能为我们的工程打包提升了不少工作效率，webpack是个好工具，值得去深入研究和探索。
个人博客

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • webpack
    目录第1章 webpack简介 11.1 webpack是什么？ 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,877评论 0赞 1
  • Gulp和Webpack的差异
    在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,732评论 1赞 32
  • 入门 Webpack，看这篇就够了
    本项目基于 入门 Webpack，看这篇就够了创建。本例程通过从头构建一个基于npm管理的前端项目，一步步的让读者...
    尤利西斯U阅读 3,430评论 0赞 8
  • webpack 2 打包实战
    写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,498评论 4赞 31
  • 你知道你想要什么吗？
    鱼与熊掌不可兼得，所谓求仁得仁，求义得义。 世间的事情很难两全，能够将事情做到两全的那肯定就不是一般人，可以做到面...
    十月痞子阅读 591评论 0赞 1

友情链接更多精彩内容