摘要：系列之及简单的使用一有什么用是核心功能，通过插件可以实现所不能完成的复杂功能，使用丰富的自定义，可以控制编译流程的每个环节，实现对的自定义功能扩展。三使用在配置文件中，向属性传入实例即可。
webpack系列之plugin及简单的使用 一.plugin有什么用
plugin是webpack核心功能，通过plugin（插件）webpack可以实现loader所不能完成的复杂功能，使用plugin丰富的自定义API，可以控制webpack编译流程的每个环节，实现对webpack的自定义功能扩展。举例
我们实际项目中就使用了HtmlWebpackPlugin插件，它帮助我们做了下面几件事儿：
在工程打包成功后会自动生成一个html模板文件
同时所依赖的CSS/JS也都会被自动引入到这个html模板文件中
设置生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，来解决可能会遇到的缓存问题。
项目打包后生成的模板文件如下：
二.什么是plugin移山
plugin是一个具有 apply方法的 js对象。 apply方法会被 webpack的 compiler（编译器）对象调用，并且 compiler 对象可在整个 compilation（编译）生命周期内访问。
一个plugin看起来大概是这个样子：
function CustomPlugin(options){
// options是配置文件，你可以在这里进行一些与options相关的工作
}
// 每个plugin都必须定义一个apply方法，webpack会自动调用这个方法
CustomPlugin.prototype.apply = function(compiler){
......
});
}
module.exports = CustomPlugin;
有兴趣对自定义插件感兴趣，想了解的更多的，可以看这里。
三.使用plugin在 webpack 配置文件（webpack.config.js）中，向 plugins 属性传入 new 实例即可。比如：
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
module: {
loaders: [
{
test: /.(js|jsx)$/,
loader: "babel-loader"
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(), //访问内置的插件
new HtmlWebpackPlugin({template: "./src/index.html"}) //访问第三方插件
]
};
注意
webpack中的插件分为内置插件和第三方插件
内置插件不需要额外安装依赖，如上面的例子中：UglifyJsPlugin插件
如果是第三方插件，如上面的例子中HtmlWebpackPlugin插件，则使用之前需要进行安装：
npm install html-webpack-plugin --save-dev四.案例
在对plugin有了一个基本认识后，来做一个小案例：
“我想对所有的文件打包后添加一个版权声明”目录结构
webpackPluginDemo的目录结构如下：
├── app
├── package-lock.json
├── package.json
├── src
│ └── index.js
└── webpack.config.js
在webpackPluginDemo根目录下安装webpack:
npm install --save-dev webpack
document.write("webpack系列之plugin的基本使用！");
const webpack = require("webpack")
module.exports = {
entry: __dirname + "/src/index.js", //入口文件
output: {
path: __dirname + "/app", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
plugins: [
new webpack.BannerPlugin("版权所有，翻版必究")
],
}
注意：BannerPlugin为内置插件，如果是其它的外置插件，则需在使用前要先安装。
➜ webpackPluginDemo webpack
Hash: 16453f43abe665633286
Version: webpack 2.4.1
Time: 70ms
Asset Size Chunks Chunk Names
bundle.js 2.86 kB 0 [emitted] main
[0] ./src/index.js 210 bytes {0} [built]
打包成功，可以看到app目录下面已经生成了bundle.js，打开bundle.js会发现版权信息已经加上了：
BannerPlugin：对所有的文件打包后添加一个版权声明
uglifyjs-webpack-plugin： 对JS进行压缩混淆
HtmlWebpackPlugin：可以根据模板自动生成html代码，并自动引用css和js文件
Hot Module Replacement：在每次修改代码保存后，浏览器会自动刷新，实时预览修改后的效果
copy-webpack-plugin：通过Webpack来拷贝文件
extract-text-webpack-plugin：将js文件和css文件分别多带带打包，不混在一个文件中
DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的变量时非常有用
optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重
更多可点击这里查看。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/94545.html
摘要：由于本篇我们只讲的基本使用，故这里不再深入讲解，有兴趣的可以点击这里学习。使用的方式有三种使用方式，如下配置推荐在文件中指定。下一篇会给大家介绍系列之及简单的使用 欢迎大家访问我的github blog查看更多文章 webpack系列之loader及简单的使用 一. loader有什么用 webpack本身只能打包Javascript文件，对于其他资源例如 css，图片，或者其他的语...
摘要：上文我们讲到了的配置和获取数据的方式，本文，我们继续深入的配置一插件中的除了自己定义了一些基本配置外，我们是可以任意的添加自定义的数据文件，就是当前文件所在的绝对路径输出路径，要用绝对路径打包之后输出的文件名教你学我们在中新增了个 上文我们讲到了options的配置和获取数据的方式，本文，我们继续深入options的配置 一、html-webpack-plugin插件中的options...
摘要：还记得我们上文中的文件吗那里面的标签还是写死的文件，那么怎么把他们变成动态的文件，这个动态生成的文件会动态引入我们打包后生成的文件呢，我们可以使用插件，首先安装这个插件，好的，接下来就开始用这个插件了官方参考文档插件通用用法 还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html...
摘要：上文我们对的实例进行了遍历分析，讲解了几个常用属性以及自定义属性的添加，本文，我们继续深入他的配置选项的探讨一选项这个属性非常有用，可以指定某个页面加载哪些如文件我们可以用他做多个页面模板的生成比如，我们在实际开发中，做一个博客网站，一 上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析，讲解了几个常用属性( inject, mini...
摘要：第一个完全使用重构的纯项目已经上线并稳定运行了。测试用例的改造前边的改为大多数原因是因为强迫症所致。但是测试用例的改造则是一个能极大提高效率的操作。 最近的一段时间一直在搞TypeScript，一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。 第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。 第二个前后端的项目目前也在重构中，关于前...
阅读 2033·2023-04-25 22:50
阅读 2845·2021-09-29 09:35
阅读 3401·2021-07-29 10:20
阅读 3170·2019-08-29 13:57
阅读 3370·2019-08-29 13:50
阅读 3046·2019-08-26 12:10
阅读 3548·2019-08-23 18:41
阅读 2647·2019-08-23 18:01
