提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

webpack系列---插件（plugin）的使用

webpack插件 使用 系列 --- plugin
2023-06-13 09:12:14 时间

一句话

插件（plugin）是用于扩展webpack的功能。

上一篇文章我们介绍了webpack-dev-server，我们在package.json配置webpack-dev-server 选项实现了自动编译，自动打开浏览器，自动更新等。 当然我们也可以在webpack.config.js中进行配置

但是热更新需借助插件（plugin）webpack.HotModuleReplacementPlugin()

const path = require('path')
//启动热更新第一步
const webpack = require('webpack')
 module.exports = {
     //入口文件
     entry:path.join(__dirname,'./src/main.js'),
     output:{
         //输出文件相关配置
         path:path.join(__dirname,'./dist'),
         filename:'bundle.js'
     },
     //启动热更新第二步
     devServer:{
         //配置dev-server的的第二方
         open:true,//自动打开浏览器
         port:3000,//设置端口
         contentBase:'src',
         hot:true
     },
    //配置插件的节点
     plugins:[
         //热更新第三步
         new webpack.HotModuleReplacementPlugin()
         //new 热更新的 模块对象

     ]
 }

上篇我们还讲到 webpack-dev-server是将我们的bundle.js托管到内存中，提高编译速度，但是我们的html页面还是磁盘上的，如果我们想得到更好的编码体验，我们是不是也可以把html页面也放在内存中

这里又要借助插件（plgin） html-webpack-plugin

安装插件

cnpm i html-webpack-plugin -D

webpack.config.js配置

//导入在内存生成hmtl页面插件
const htmlWebpackPlugin = require('html-webpack-plugin')
...
//配置插件的节点
     plugins:[
         //热更新第三步
         new webpack.HotModuleReplacementPlugin(),
         //创建一个在内存中生成html页面的插件
         new htmlWebpackPlugin({
             template:path.join(__dirname,'./src/index.html'),//指定模板文件
             filename:'index.html'//指定生成页面的名称
         })

     ]
}

运行 npm run dev

查看html文件源码

很明显 html-webpack-plugin为我们自动引入了bundle.js

抽离css样式插件

cnpm i mini-css-extract-plugin -D 通过该插件会将我们的样式文件单独抽离出来 我们默认的style-loader是将我们的css样式放在style标签

let path = require('path');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'build')
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'main.css'//生成的样式文件名称
        })
    ],
    module:{
        rules:[
            //test 正则匹配文件
            //use 指定loader处理
           {
               test:/\.css$/,
               use:[
                   MiniCssExtractPlugin.loader,
                   'css-loader'
                ]
             
           }
        ]
    }
}

样式输出成文件main.css

body{
    background-color: red;
    transform: rotate(45deg);
}

浏览器前缀

cnpm i postcss-loader autoprefixer

该插件配合postcss-loader可以自动帮我们的样式文件添加浏览器前缀

...
module:{
        rules:[
            //test 正则匹配文件
            //use 指定loader处理
           {
               test:/\.css$/,
               use:[
                   MiniCssExtractPlugin.loader,
                   'css-loader',
                   'postcss-loader'
                ]
             
           }
        ]
    }
...

新键配置文件 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
            
    ]
}

在package.json添加浏览器列表

 "browserslist": [
    "> 1%",
    "last 5 versions",
    "not ie <= 8"
  ]

常用参数

> 1%全球超过1%人使用的浏览器

> 5% in US指定国家使用率覆盖

last 2 versions所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本

Firefox ESR火狐最新版本

Firefox > 20指定浏览器的版本范围

not ie <=8方向排除部分版本

Firefox 12.1指定浏览器的兼容到指定版本

unreleased versions所有浏览器的beta测试版本

unreleased Chrome versions指定浏览器的测试版本

since 20132013年之后发布的所有版本

//打包前
body{
    background-color: red;
    transform: rotate(45deg);
    border:1px solid red;
    border-radius: 45px;
    box-sizing: border-box;
}
//打包后
body{
    background-color: red;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    border:1px solid red;
    border-radius: 45px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

文件压缩

可以看到css文件没有压缩，有时候我们需要打包后的css文件压缩

cnpm i optimize-css-assets-webpack-plugin

webpack.config.js

...
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
module.exports={
    //优化项
    optimization:{
        minimizer:[
            new OptimizeCss()
        ]
    },
    entry:'./src/index.js',
        ...

打包后的css

body{background-color:red;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border:1px solid red;border-radius:45px;-webkit-box-sizing:border-box;box-sizing:border-box}

但是使用这个插件导致了js文件没有被压缩，之前js文件是正常压缩的

我们需要 cnpm i terser-webpack-plugin压缩js文件

...
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin  = require('terser-webpack-plugin')
module.exports={
    //优化项
    optimization:{
        minimizer:[
            new TerserJSPlugin ({
               cache:true,//启用缓存
               parallel:true,//并发打包，压缩多个
               sourceMap:true
            }),
            new OptimizeCss()
        ]
    },
...

这样css和js文件都正常压缩

小插件

cleanWebpackPlugin
copyWebpackPlugin
bannerPlugin(内置)

cleanWebpackPlugin：每次输出前先将打包目录清除

cnpm i clean-webpack-plugin - D

使用下面这种方式也可实现打包前清除目录

npm i rimraf

//package.json
"scripts": {
    "build:client": "cross-env NODE=production webpack --config build/webpack.config.client.js",
    "build":"npm run clean && npm run build:client",
    "dev": "cross-env NODE=development webpack-dev-server --config build/webpack.config.client.js",
    "clean":"rimraf dist"
  },

相关文章