webpack 如何监听html更新的同时不将其打包到入口js

Question

在入口文件中，需要 import 相应资源才能形成依赖图，并且 devServer 只会监听依赖图包含文件的更改。

对于 html（即下面的 index.pug）就形成了一个问题，html 被打包进来 js，但其实这段 html 冗余的。

import './index.pug'
import './index.scss'

devServer 配置如下（尝试了 watchOptions.poll 也无效）：

devServer: {
    contentBase: './dist',
    openPage: 'home.html',
    open: true,
    hot: true
}

如果做到 production 下不将 html 打包进 js 呢？即 webpack 如何监听 html 更新的同时不将其打包到 js？

Answer 1

如果你 import index.pug 的原因仅仅只是让 devserver 监听 .pug 文件 hot reload 的话，
使用这个可以判断环境是prod还是dev:

const isDev = process.env.NODE_ENV === 'development'
if (isDev) require('index.pug')

---

如果有帮到你，可以点赞采纳打赏哦～

Answer 2

你这个思路有问题
模板不应在js中引入 应该做的是吧js引入到模板中去