@vinsea/extra-jsfile-webpack-plugin
v1.2.1
Published
Generate extra JS code/file into the entry-file/html
Downloads
3
Maintainers
vinseaReadme
主要功能：
- 打包时候可以将额外的
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+