webpack4 下如何实现在页面没有引用css情况下自动将指定同名css文件link插入到同名html中

如题:

webpack项目目录:

src
    js
    sass
        index.scss
        about.scss
    
    index.html
    about.html
module.exports = {
    entry: {
        index: './src/entry.js',
        about: './src/js/about.js',
    },
    output: {
        path: path.join(__dirname, "../dist/"),
        filename: "js/[name].min.js?[hash]"
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: "./src/index.html",
            chunks: ["index"]
        }),
        new HtmlWebpackPlugin({
            filename: 'about.html',
            template: "./src/about.html",
            chunks: ["about"]
        }),
    ]
}
        

目前我使用以上配置实现了:同名js文件插入同名html,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是关于
<script type="text/javascript" src="js/about.min.js?815ee51acf02c880d97f"></script></body>
</html>

如何实现scss编译后的csslink入html中呢?

像下面这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/about.71bb02ebdae331e6bb2d.min.css" rel="stylesheet">
</head>
<body>
这是关于
<script type="text/javascript" src="js/about.min.js?815ee51acf02c880d97f"></script></body>
</html>
阅读 2.8k
2 个回答

在页面里面 improt './sass/index.scss'

在页面的js文件里将对应的css导入
再使用 mini-css-extract-plugin 再css分离成文件
再html-webpack-plugin 配置inject 应该会将其注入到html里

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题