webpack-plugin

最新推荐文章于 2025-04-27 09:17:00 发布

田妫

最新推荐文章于 2025-04-27 09:17:00 发布

阅读量179

点赞数

分类专栏： vue学习过程文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44020809/article/details/118892553

版权

vue学习过程专栏收录该内容

8 篇文章

订阅专栏

认识plugin

plugin是什么？
plugin是插件，通常是用于对某个现有的架构进行扩展
webpack中的插件，就是对webpack现有的功能的各种扩展，比如打包优化，文件压缩等等。
loader和plugin的区别：
loader主要用于转换某些类型的模块，它是一个转换器
plugin是插件，它是对webpack本身的一个扩展，是一个扩展器
plugin的使用过程：
1，通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
2，在webpack.config.js中的plugin中配置插件

添加版权的插件

这是最简单的插件，为打包的文件添加版权声明
BannerPlugin，属于webpack自带的插件
既然是自带，就不用下载，只需要修改webpack.config.js文件：

resolve: {
        extensions: ['.js', '.css', '.vue'],
        // 别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归于我')
    ]

重新打包后：
在这里插入图片描述

el和template区别二

el和template模板的关系是什么？
el用于指定Vue要管理的DOM，可以帮助解析其中的指令，事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应的el模板
这样做的好处：不需要再以后的开发中在次操作index.html，只需要再template中写入对应的标签即可

打包html的plugin

目前，index.html文件是放在项目的根目录下的
在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包等文件也就没有意义了
所以我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件
HtmlWebapckPlugin插件可以为我们做这些事情：
自动生成一个index.html文件（可以指定模板来生成）
将打包的js文件，自动通过script标签插入到body中
安装HtmlWebpackPlugin插件：
npm install html-webpack-plugin@3.2.0 --save-dev
安装之后修改配置文件。
1，导入

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

2，添加：

plugins: [
        new webpack.BannerPlugin('最终版权归于我'),
        new HtmlWebpackPlugin()
    ]

重新打包后，发现dist目录下多了一个index.html文件。
在这里插入图片描述

然后发现在index.html的下面，发现两个问题：
1，路径
在这里插入图片描述
这时候要修改配置：

在这里插入图片描述
2，自动生成模板：
外面的index.html：

<body>
    <div id="app">
    </div>
</body>

在不引入的情况下自动生成模板，要修改配置：

new HtmlWebpackPlugin({
            template: 'index.html'
        })

重新打包之后，自动生成插入进去：
在这里插入图片描述

js压缩的plugin

在项目发布之前，我们必然需要对js等文件进行压缩处理，在这里使用一个插件：uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

之后修改配置文件：

查看bundle.js，时已经被压缩了
但是这个插件不能和添加版权声明的插件BannerPlugin一起用，因为这个插件会删掉注释，而版权声明就是一个注释。