Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/byronbyyuan/modify--chunk-webpack-plugin
https://github.com/byronbyyuan/modify--chunk-webpack-plugin
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/byronbyyuan/modify--chunk-webpack-plugin
- Owner: byronbyyuan
- Created: 2018-09-04T03:37:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-10T02:24:34.000Z (over 6 years ago)
- Last Synced: 2024-11-03T06:11:37.429Z (about 1 month ago)
- Language: JavaScript
- Size: 64.5 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-star - modify--chunk-webpack-plugin
README
# modify-chunk-webpack-plugin
## 作用是什么？
#### HtmlWebpackPlugin 能很好地帮我们注入打包的入口文件,但我们可能有需要更细粒化操作比如：
+ 需要将某个chunk内联。
+ 需要移动某个chunk的位置，由body移动到head。
+ 甚至是不需要某个chunk，这种能够自定义操作出口的文件的可能。
+ 添加一段路径或者内联一段代码.
#### webpack 出口的publicPath一旦设置,所有的资源都会加上该路径，可能我们需要自定义chunk路径:
+ 有时候可能说某个出口chunk,必如来自第三方包的出口文件需要开启cdn，但其他的chunk不需要
## options参数
| key | Description(优先级*) | value(type) | default |
| :--------: | :-----------------: | :------------------------------------:| :------------------------: |
| basePath | 添加的路径前缀 | url | `` |
| cssChunk | 需要添加chunk名称* | chunkName/all/[chunkName] | `` |
| jsChunk | 需要添加chunk名称* | chunkName/all/[chunkName] | `` |
| customBase | 自定义设置路径的函数** | 回调函数 function(返回值) | `` |
| start | 添加一个文件的路径的位置 | start/end | end |
| addPath | 添加文件的对象* |Object{js/css} | `` |
| customAdd | 自定义添加文件的函数** | 回调函数 function | `` |
| InlineChunk | 将chunk变为内联 | chunkName/[chunkName] | `` |
### webpack.config.js
```
const customChunkWebpackPlugin = require('custom-chunk-webpack-plugin')
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new customChunkWebpackPlugin({
basePath:'http://...',
jsChunk:'vendors',
cssChunk:'all',
InlineChunk:'runtime',
})
]
}
```
### 添加前缀实例
```
new customChunkWebpackPlugin({
basePath:'http://...',
jsChunk:['vendors','app'],
cssChunk:'all',
})
```
```
new customChunkWebpackPlugin({
basePath:'http://...',//无效
jsChunk:['vendors','app'],//无效
cssChunk:'all',//无效
customBase:asset =>{ //有效 函数优先级最高
asset['js'][0] = 'http://...' + asset['js'][0]
return asset
},
})
```
### chunk转内联
```
new customChunkWebpackPlugin({
InlineChunk:'runtime'
})
```
```
new customChunkWebpackPlugin({
InlineChunk:['runtime','app']
})
```
### 添加路径
```
// 这种方式添加的所有都基于start的值来,默认是end 添加到当前已有的chunk后面
// js只会添加到body无法移动到head
new customChunkWebpackPlugin({
start:'start',
addPath:{
js:'http://cdn.comxxx.js',
css:['http://cdn.com/xx/xx.css','/xx/xx.css']
},
})
```
```
//参数head和body都是之后的html标签所需要加载的内容的数组项
//你可以通过head.set 或者body.set 的方法来插入你要的内容
//如果你需要更自由的方式 那你可以直接操作这两个对象
new customChunkWebpackPlugin({
//set的方式body与head使用方式相同 以head为例,参数只能是数组 否则无效
//插入的位置同样以start来作为位置的标识
customAdd:(head,body)=>{
head.set([
{
type:'Inline', //存在src的值 也会只处理Inline
innerHTML:'var a = 1', //到这一部的代码是无法再压缩的
tag:'css', //插件不会去检查是否合格，很明显这是错误的 他将生成 style标签 但值是js
src:'http://xxxx.xxx'
},
{
type:'Inline',
innerHTML:'var a = 1', //到这一部的代码是无法再压缩的
tag:'js',
},
{
tag:'js',
src:'http://xxxx.xxx',
},
{
start:'start',
tag:'js',
src:'http://xxxx.xxx',
}
])
}
})
```
```
// 自定义操作head和body
// 插入节点的模板
let cssTemplate = {
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes:{ href: '', rel: 'stylesheet' }
}
let jsTemplate = {
tagName:'script',
closeTag: true,
attributes:{ type: 'text/javascript',src: ''}
}
let InlinejsTemplate = {...this.jsTemplate,attributes:{ type: 'text/javascript' },innerHTML:''}
let InlinecssTemplate = {
tagName:'style',
closeTag: true,
attributes:{ type: 'text/css' },
innerHTML:''
}
new customChunkWebpackPlugin({
customAdd:(head,body)=>{
head.push({
tagName:'script',
closeTag: true,
attributes:{ type: 'text/javascript',src: ''http://xxxx.xxx''}
})
}
})
```
### 缺陷
#### 无法做到异步加载的chunk自定义，只能做到出口的chunk修改，下个版本将考虑实现更全面更细化的控制的可能。