webpack-plugin-inject-external
Usage
# npm
npm install @coco-platform/webpack-plugin-inject-external --only=dev;
# yarn
yarn add @coco-platform/webpack-plugin-inject-external --dev;Options
/**
* @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:
interface CompoundLinkage {
url: string;
integrity: string; // required property within compound mode
}
type Linkage = string | string[] | CompoundLinkage | Array<CompoundLinkage>;
// single external module
type Module = {
name: string;
linkage: Linkage;
};when external module reference the same resource within different environment:
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:
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:
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 lang="en">
<head>
<meta charset="UTF-8" />
<title>Webpack Plugin</title>
</head>
<body>
<script
type="text/javascript"
src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"
crossorigin="anonymous"
integrity="sha384-fYxN7HsDOBRo1wT/NSZ0LkoNlcXvpDpFy6WzB42LxuKAX7sBwgo7vuins+E1HCaw"
></script
><script
type="text/javascript"
src="https://cdn.bootcss.com/moment.js/2.22.1/locale/zh-cn.js"
crossorigin="anonymous"
integrity="sha384-XjUTsP+pYBX4Kwg40gPvhWcRGKZh9gUpDForgg5bwsnyNU+VabKhRX6XkyM6fLk4"
></script
><script type="text/javascript" src="/main.js"></script>
</body>
</html>License
MIT