webpack配置alias不起作用

项目目录
image.png

// 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
image.png

image.png

换成src="../dist/main.js"就可以正常显示

有劳各位大神解释一下,看看是不是我配置的alias有错,谢谢啦!

阅读 3.9k
1 个回答

webpack 并不直接处理 html,通常需要 html-webpack-plugin 辅助生成。所以你在 html 里使用 webpack alias 就没有作用了。

我也建议你用 html-webpack-plugin 处理 HTML,它可以帮你自动注入生成的 JS、CSS。

~ 可以帮你在样式里使用第三方模块,比如 animate.css,以下来自我最近的代码:

@import "~animate.css/source/_vars.css"
@import "~animate.css/source/_base.css"
@import "~animate.css/source/attention_seekers/wobble.css"
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题