Vue初学31-插件的使用

最新推荐文章于 2023-08-13 22:42:11 发布

置顶周达

最新推荐文章于 2023-08-13 22:42:11 发布

阅读量249

点赞数 1

分类专栏： vue 文章标签： webpack插件

本文链接：https://blog.csdn.net/gis_zhouda/article/details/106542715

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

插件（plugin）是对现有框架的扩展，使用前需要安装和配置。

BannerPlugin

修改webpack.config.js

首先，引入webpack

const webpack = require('webpack');

plugins:[
        new webpack.BannerPlugin('Copyright 2020 by zd ')
    ]

html-webpack-plugin

目前，index.html是存放在项目的根目录下的。发布的dist目录下没有index.html,我们需要将index.html文件一起打包到dist目录下。HtmlWebpackPlugin插件就是来完成这项工作的。

HtmlWebpackPlugin插件可以根据模板自动生成index.html文件，并自动将打包后的js文件添加到body中。

通过命令，我的webpack的版本是3.6.0，根据webpack的版本，需要指定下版本，否则会报错。

npm install html-webpack-plugin@3.2.0 --save-dev

安装完成后，修改webpack.config.js

生成后，index.html也在dist目录下，因此,不需要指定publicPath,output中将publicPath删除。

HtmlWebpackPlugin还可以指定index.html模板，可以指定项目根目录中的index.html作为模板。

因为HtmlWebpackPlugin会自动将打包后的js文件添加到body中，因此，模板中对js文件的引用可以删除。

修改webpack.config.js，指定index.html模板，如下

plugins:[
        new webpack.BannerPlugin('Copyright 2020 by zd '),
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ]

重新打包，dist目录下根据模板添加了index.html，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

uglifyjs-webpack-plugin

在发布之前，往往需要对js等文件进行压缩处理，需要uglifyjs-webpack-plugin插件，为了与cli2保持一致，指定版本为1.1.1。

通过如下命令安装

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

安装完成后，修改webpack.config.js的配置，如下

重新打包，生成的js文件即被压缩，如下

周达

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue初学31-插件的使用

插件（plugin）是对现有框架的扩展，使用前需要安装和配置。bannerplugin是webpack自带的插件，用于为打包的文件添加版权声明。HtmlWebpackPlugin插件可以根据模板自动生成index.html文件，并自动将打包后的js文件添加到body中。在发布之前，往往需要对js等文件进行压缩处理，需要uglifyjs-webpack-plugin插件
复制链接

扫一扫