新手求助 webpack使用htmlWebpackPlugin问题

#1

要怎么将不同的js文件插入进html模板不同的地方
比如:main.js插入进body尾部 而head.js插入进head中

具体问题：ant-design-mobile中的问题 将antm-viewport插入head(必须在css文件之前)而主js插入到body尾部

#2

求个大佬~

#3

https://github.com/jantimon/html-webpack-plugin#configuration
inject 参数可以控制在head或body插入, 如果要插入的是一个无须打包的静态js文件, 可以直接放到template中

#4

但是inject会把所有的js都放进head或body中，不能分别放。
如果将antm-viewpor.js ( antd-mobile-0.8-以上版本「高清」方案设置的js)放在template里
在开发环境中使用npm start或yarn start时这个文件又不会生效。

(注：我用的是create-react-app脚手架)
#5

纠结~~~~~

#6

没用过create-react-app脚手架, 不应该不生效啊, 直接放入template, dev编译后index.html里找不到那段代码吗?
方不方便放下template源码和htmlWebpackPlugin配置

#7

entry: {
//‘ant-viewport’: paths.appViewPort,
‘main’: [
require.resolve(‘react-dev-utils/webpackHotDevClient’),
require.resolve(’./polyfills’),
require.resolve(‘react-error-overlay’),
paths.appIndexJs,
],
},

…
new HtmlWebpackPlugin({
title:‘React Mobile’,
inject: ‘body’,
template: paths.appHtml,
chunks:[‘main’],
}),

…

template:

``<!doctype html>

<%= htmlWebpackPlugin.options.title %> You need to enable JavaScript to run this app.
``

这样放的话用dev编译会报错(但是整体效果还是有 就是antm-viewport.js的问题)

浏览器命令行：
antm-viewport.js:1 Uncaught SyntaxError: Unexpected token <

antm-viewport.js 浏览器看到的js内容会变成这样：(变成html文档)

``<!doctype html>

React Mobile You need to enable JavaScript to run this app.
``

antm-viewport.js原始代码是这样：

const win = window;
export default win.flex = (baseFontSize, fontscale) => {
const _baseFontSize = baseFontSize || 100;
const _fontscale = fontscale || 1;

const doc = win.document;
const ua = navigator.userAgent;
const matches = ua.match(/Android[\S\s]+AppleWebkit/(\d{3})/i);
const UCversion = ua.match(/U3/((\d+|.){5,})/i);
const isUCHd = UCversion && parseInt(UCversion[1].split(’.’).join(’’), 10) >= 80;
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
let dpr = win.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
dpr = 1;
}
const scale = 1 / dpr;

let metaEl = doc.querySelector(‘meta[name=“viewport”]’);
if (!metaEl) {
metaEl = doc.createElement(‘meta’);
metaEl.setAttribute(‘name’, ‘viewport’);
doc.head.appendChild(metaEl);
}
metaEl.setAttribute(‘content’, width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale});
doc.documentElement.style.fontSize = ${_baseFontSize / 2 * dpr * _fontscale}px;
};

是不是antm-viewport.js的问题 贼烦~

#8

看起来应该是文件路由把/static/antm-viewport.js指向index.html了吧. 不清楚你怎么配置的, antm-viewport.js这个文件需要频繁修改吗, 把它传到线上然后用http地址而不是相对路径引入试试看

#9

问题已解决
可以把里面的js代码写在html里 直接使用 不要用src外链…

#10

:joy: 哈哈