webpack配置alias不起作用
项目目录
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔行变色</title>
<script src="~@d/main.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>// index.js
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', 'lightblue')
})// webpack.config.js
const path = require('path')
module.exports = {
// 编译模式
mode: 'development',
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'@': path.resolve(__dirname, 'src'),
'@d': path.resolve(__dirname, 'dist')
}
}
}控制台执行npm run dev以后，在dist生成了一个main.js文件
为什么我在index.html里面script标签里面引用~@d/main.js不起作用呢，本来我是用@d/main.js，发现报错以后查了一下网上说可以加~号，我也不知道~是干嘛的T.T
换成src="../dist/main.js"就可以正常显示
有劳各位大神解释一下，看看是不是我配置的alias有错，谢谢啦！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
webpack 并不直接处理 html，通常需要 html-webpack-plugin 辅助生成。所以你在 html 里使用 webpack alias 就没有作用了。
我也建议你用 html-webpack-plugin 处理 HTML，它可以帮你自动注入生成的 JS、CSS。
~可以帮你在样式里使用第三方模块，比如 animate.css，以下来自我最近的代码：