0.4.1 • Published 6 years ago
webpack-plugin-inject-external v0.4.1
webpack-plugin-inject-external
Inject externals resource automatic, cooperate with html-webpack-plugin.
Options
options.mappings
Description about externals resource, required. resource can be string, or plain object, linkage field will insert into template also.
{
'web-animations-js': 'https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js',
env: {
development: {
react: 'https://cdn.bootcss.com/react/15.6.1/react.js',
jquery: 'https://cdn.bootcss.com/jquery/3.2.1/jquery.js',
lodash: 'https://cdn.bootcss.com/lodash.js/4.17.4/lodash.js',
echarts: 'https://cdn.bootcss.com/echarts/3.7.0/echarts.js',
angular: 'https://cdn.bootcss.com/angular.js/1.6.6/angular.js',
'react-dom': 'https://cdn.bootcss.com/react/15.6.1/react-dom.js',
bootstrap: {
url: 'https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js',
linkage: ['https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css']
},
moment: {
url: 'https://cdn.bootcss.com/moment.js/2.18.1/moment.js',
linkage: ['https://cdn.bootcss.com/moment.js/2.18.1/locale/zh-cn.js']
}
},
production: {
react: 'https://cdn.bootcss.com/react/15.6.1/react.min.js',
jquery: 'https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js',
lodash: 'https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js',
echarts: 'https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js',
angular: 'https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js',
'react-dom': 'https://cdn.bootcss.com/react/15.6.1/react-dom.min.js',
bootstrap: {
url: 'https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js',
linkage: ['https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css']
},
moment: {
url: 'https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js',
linkage: ['https://cdn.bootcss.com/moment.js/2.18.1/locale/zh-cn.js']
}
}
}
};Template
Modify template for html-webpack-plugin, pay attention onto the template tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Plugin</title>
<!-- slot library CDN stylesheet -->
<template data-id="posthtml-inject" data-name="library:stylesheet"></template>
<!-- slot library CDN stylesheet -->
</head>
<body>
<main class="happy-react">
<h4 class="h4">Hello world!!!</h4>
</main>
<!-- slot library CDN scripts -->
<template data-id="posthtml-inject" data-name="library:script"></template>
<!-- slot library CDN scripts -->
</body>
</html>Usage
# or npm install webpack-plugin-inject-external --only=dev;
yarn add webpack-plugin-inject-external --dev;License
MIT