https://github.com/coco-platform/webpack-plugin-inject-external
Inject externals CDN resource automatic, cooperate with html-webpack-plugin.
https://github.com/coco-platform/webpack-plugin-inject-external
webpack webpack-plugin webpack2
Last synced: 5 months ago
JSON representation
Inject externals CDN resource automatic, cooperate with html-webpack-plugin.
- Host: GitHub
- URL: https://github.com/coco-platform/webpack-plugin-inject-external
- Owner: coco-platform
- Created: 2017-08-31T07:13:56.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T04:04:24.000Z (about 3 years ago)
- Last Synced: 2025-04-02T21:18:32.515Z (over 1 year ago)
- Topics: webpack, webpack-plugin, webpack2
- Language: TypeScript
- Homepage:
- Size: 1.28 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# webpack-plugin-inject-external
[](https://coveralls.io/github/coco-platform/webpack-plugin-inject-external?branch=master) [](https://greenkeeper.io/)
## Usage
```shell
# npm
npm install @coco-platform/webpack-plugin-inject-external --only=dev;
# yarn
yarn add @coco-platform/webpack-plugin-inject-external --dev;
```
## Options
```javascript
/**
* @typedef {object} Options
*
* @property {string} env - development, production or other environment name
* @property {string} definition - YAML file path, whose contents describe external resources
*/
```
## Configurations
`webpack-plugin-inject-external` use `yaml` config file, single external module define like below:
```typescript
interface CompoundLinkage {
url: string;
integrity: string; // required property within compound mode
}
type Linkage = string | string[] | CompoundLinkage | Array;
// single external module
type Module = {
name: string;
linkage: Linkage;
};
```
when external module reference the same resource within different environment:
```yaml
library:
- name: 'web-animations-js'
linkage: 'https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js'
```
when external module reference different resource within different environment:
```yaml
environment:
development:
- name: 'react'
linkage: 'https://cdn.bootcss.com/react/16.3.2/umd/react.development.js'
- name: 'moment'
linkage:
- 'https://cdn.bootcss.com/moment.js/2.22.1/moment.js'
- 'https://cdn.bootcss.com/moment.js/2.22.1/locale/zh-cn.js'
production:
- name: 'react'
linkage:
url: 'https://cdn.bootcss.com/react/16.3.2/umd/react.production.min.js'
integrity: 'sha384-xH6t0qiGSnjsUirN+xJjNhsfepiFFyK/wHMjrqPu6OoxN8uDO454QqZx3Wcos7en'
```
## Usage
Then config the webpack:
```javascript
const configuration = {
entry: path.resolve(__dirname, '__fixture__', 'index.js'),
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].js',
publicPath: '/',
},
externals: {
moment: 'moment',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '__fixture__', 'index.html'),
inject: 'body',
}),
new InjectExternalPlugin({
env: 'production',
definition: path.resolve(
__dirname,
'__fixture__',
'bootcdn.externals.yml'
),
}),
],
};
```
Finally output:
```html
Webpack Plugin
```
## License
MIT