javascript - Webpack 和 Github 页面的部署问题

Question

我有一个用 Webpack 构建的小 API 应用程序。为了在 GitHub Pages 上发布它，我安装了 npm 包 gh-pages。

一切正常，dist 文件夹被正确推送，当我打开实时版本时，索引和 scss 文件也会显示。

现在的问题是我的 bundle.js 没有加载。所以整个功能是不活跃的。我发现的另一件事是我的媒体查询也没有弹出。

如果有人可以帮助我解决这个问题，那就太好了！

我的仓库：

https://github.com/jeanmarc5592/Cocktail-API-Project

我的 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const multi = require('multi-loader');

module.exports = {
    entry: ['babel-polyfill', './src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: './src/index.html'  
        })
    ],
    module: {
        rules: [
            {  
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: {
                    loader: multi('style-loader!css-loader!sass-loader')
                }
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ],
            },
        ],
    },
};

标签： javascriptwebpackgithub-pages