webpack配置alias不起作用_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

项目目录

// 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有错，谢谢啦！

###

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"