如题:
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>
在页面里面 improt './sass/index.scss'