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是个好工具，值得去深入研究和探索。
个人博客
网友评论