学习webpack(三)：plugin的介绍和使用

最新推荐文章于 2022-04-25 21:06:11 发布

copyer_xyf

最新推荐文章于 2022-04-25 21:06:11 发布

阅读量433

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/James_xyf/article/details/119762954

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

认识Plugin

plugin也是webpack的核心之一

loader是用于特定的模块类型进行转换

plugin可以用于执行更加广泛的任务，比如打包优化，资源管理，环境变量注入等

CleanWebpackPlugin

在前面的学习过程中，每次打包之后，需要手动删除，再次进行打包，这个手动删除的过程，我们就可以只用一个插件帮助我们来完成。

安装

npm install clean-webpack-plugin -D

使用：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    //入口文件 （可以修改地址）
    entry: './src/index.js',
    //打包的出口文件
    output: {
        //打包的路径
        path: path.resolve(__dirname, './build'),
        //打包过后的文件名
        filename: 'build.js'
    },
    module: { },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

HtmlWebpackPlugin

在前面的学习过程中，打包文件夹下是没有index.html文件的，那么就会导致在项目进行部署的时候，部署，因为需要一个入口文件

所以也需要对index.html进行打包处理

安装：

npm install html-webpack-plugin -D

使用:

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: '入口文件标题'
        })
    ]
}

这样打包文件下，就会有一个index.html文件

默认情况下，HtmlWebpackPlugin中有一个内置ejs模板

那么自己定义一个HTML模板呢？

//vue的模板 public/index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

手动创建一个public文件，里面添加一个index.html模板，当然这个模板里面包含ejs语法，进行配置。

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: '入口文件标题',
            template: './public/index.html'
        })
    ]
}

当我们再次打包的时候，会报错。如下：

在这里插入图片描述

在模板中，

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
//ejs的模板引擎没有找着base_url, 所以会报错

这里我们就需要使用另外一个插件DefinePlugin

DefinePlugin

DefinePlugin 允许在编译时创建配置的全局变量，是一个webpack的内置插件（不需要单独安装）

const { DefinePlugin } = require('webpack')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: '入口文件标题',
            template: './public/index.html'
        }),
         new DefinePlugin({
            //第一个单引号，包裹的是一个变量，第二个双引号，才是解析的字符串
            BASE_URL: '"./"'   
        })
    ]
}

这样再次打包，就不会再报错了。

CopyWebpackPlugin

在打包的过程中，将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。

这个复制的功能就是由CopyWebpackPlugin来实现完成的

安装：

npm install CopyWebpackPlugin -D

配置属性：

复制的规则在patterns中设置
from：设置从哪一个源中开始复制
to：复制的位置，可以省略，会被默认复制到打包文件的目录下
globOptions: 设置一些额外的选项

使用：

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'public',
                    to: './', //可以省略
                    globOptions: {
                        //忽略文件不被复制
                        ignore: [
                            "**/index.html"
                        ]
                    }
                }
            ]
        })
    ]
}