mar*_*618 5 javascript webpack html-webpack-plugin
我使用具有多个入口点和块的 Webpack/HtmlWebpackPlugin 来编译 AngularJS 应用程序。我需要将 JS 注入到 HTML 模板中间的某个位置，所以我使用
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
如此处所述： https: //github.com/jaketrent/html-webpack-template/blob/master/index.ejs。模板已编译，但没有为我的块插入脚本标签。怎么了？
我的相关Webpack配置[webpack.prod.config.js]：
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const common = require('./webpack.base.config.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
output: {
filename: '[name].bundle.min.js',
path: path.resolve(__dirname, 'dist.prod')
},
plugins: [
new HtmlWebpackPlugin({
template: './src-ts-store/landingpage_store.liquid.ejs',
filename: 'landingpage_store.liquid',
base: {href: '/apps/sgp'},
inject: false,/* instead using this: https://github.com/jantimon/html-webpack-plugin/issues/386 , https://github.com/jaketrent/html-webpack-template */
chunks: ['app-store','defaultVendors','dptCommon']
}),
new HtmlWebpackPlugin({
template: './src-ts-admin/landingpage_admin.html.ejs',
filename: 'landingpage_admin.html',
base: {href: '/frontend-admin/'},
inject: false,/* instead using this: https://github.com/jantimon/html-webpack-plugin/issues/386 , https://github.com/jaketrent/html-webpack-template */
chunks: ['app-admin','defaultVendors','dptCommon']
})
]
});
模板的相关部分[landingpage_admin.html.ejs]
<html ng-app="DPT" ng-controller="appController">
<script src="app.environment.var.js"></script>
<link href="plugins/bootstrap-dropdown-removed-typography.css" rel="stylesheet" type="text/css" />
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
<script src="https://kit.fontawesome.com/b6b551a0d0.js" crossorigin="anonymous"></script>
[...]
相关控制台输出
Child HtmlWebpackCompiler:
2 assets
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src-ts-store/landingpage_store.liquid.ejs 2.26 KiB {0} [built]
[1] ./node_modules/html-webpack-plugin/lib/loader.js!./src-ts-admin/landingpage_admin.html.ejs 12 KiB {1} [built]
我发现https://github.com/jaketrent/html-webpack-template/issues/69#issuecomment-376872044并且没有真正理解实际出了什么问题我已经改变了
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
以下内容解决了我的问题：
<% for (var chunk in htmlWebpackPlugin.files.js) { %>
<script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script>
<% } %>
| 归档时间： |
|
| 查看次数： |
4244 次 |
| 最近记录： |