Extra-Jsfile-Webpack-Plugin
主要功能：
- 打包时候可以将额外的
js文件加入到 html-webpack-plugin 的资源队列中。 （会插入到 index.html） -
webpack在library模式下打包的入口文件中(entry)加入指定的js脚本
示例
详细参数请查看
默认情况
new ExtraJsfileWebpackPlugin()将会在window上添加一个全局对象 __EXTRA_JSFILE_WEBPACK_PLUGIN__，包含项目信息：
> console.log(window.__EXTRA_JSFILE_WEBPACK_PLUGIN__)
> {
> name: `package.json`里的`name`,
> version: `package.json`里的`version`,
> buildDate: 打包时间,
> author: `package.json`里的`author`,
> dependencies: `package.json`里的`dependencies`
> }
添加自定义js脚本
new ExtraJsfileWebpackPlugin({
template: "window.__YOUR_KEY_NAME__='ExtraJsfileWebpackPlugin'"
})控制台：
> console.log(window.__YOUR_KEY_NAME__)
> "ExtraJsfileWebpackPlugin"
往html中添加指定js文件
比如项目里有一个extra-js-file.js
new ExtraJsfileWebpackPlugin({
pathOnly: true, // true 如果不想生成默认的`__EXTRA_JSFILE_WEBPACK_PLUGIN__`对象
paths: ['/path/to/extra-js-file.js']
})这个js文件会被插入到最终生成的html中：
<body>
<div id="app"></div>
<script src="/extra-js-file.js"></script>
<script src="/js/app.fe6a0b5c.js"></script>
</body>webpack打包成library时
new ExtraJsfileWebpackPlugin({
isLibrary: true,
libraryEntry: '/your/path/to/lib/entry' // 默认是 src/index.js
})用法
ℹ️ 依赖于 html-webpack-plugin 3.* 以下版本，后续会兼容最新版本
安装
npm install @vinsea/extra-jsfile-webpack-plugin --save-dev正常用webpack
webpack.config.js
const ExtraJsfileWebpackPlugin = require('@vinsea/extra-jsfile-webpack-plugin');
module.exports = {
plugins: [
new ExtraJsfileWebpackPlugin(),
],
};vue cli2
build/webpack.prod.conf.js
const ExtraJsfileWebpackPlugin = require('@vinsea/extra-jsfile-webpack-plugin');
const webpackConfig = merge(baseWebpackConfig, {
// ...
})
webpackConfig.plugins.push(new ExtraJsfileWebpackPlugin({ 这里是参数 }));
module.exports = webpackConfig;vue cli3
vue.config.js
const ExtraJsfileWebpackPlugin = require('@vinsea/extra-jsfile-webpack-plugin');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new ExtraJsfileWebpackPlugin({ 这里是参数 }));
}
}
}选项
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
isLibrary |
{Boolean} |
false |
是否是库模式 创建libraries时需要传该参数
|
libraryEntry |
{string} |
src/index.js |
库模式打包入口js路径 |
filename |
{String} |
version |
通过下面的 template 参数生成的 js 文件的文件名 |
template |
{String} |
undefined |
自定义插入到 index.html 中的 js 文件的内容 |
name |
{String} |
package.json里的name
|
项目名 |
version |
{String} |
package.json里的version
|
版本号 |
author |
{String} |
package.json里的author
|
作者 |
hash |
{Boolean} |
true |
是否给生成的 js 文件添加版本标示 |
pathOnly |
{Boolean} |
false |
是否只通过路径插入 js 文件，而不用 template |
paths |
{Array} |
[] |
自定义插入到 index.html 中的 js 文件的路径 |
TODO
- 加单元测试
- 兼容
html-webpack-plugin4+