Как сделать так, чтобы общедоступный путь webpack работал с относительной подпапкой

У меня есть следующий файл конфигурации webpack:

const path = require('path'),
    MiniCSSExtractPlugin = require('mini-css-extract-plugin'),
    CleanWebpackPlugin = require('clean-webpack-plugin'),
    postCssPresetEnv = require('postcss-preset-env'),
    postCssScss = require('postcss-scss'),
    glob = require('glob'),
    autoprefixer = require('autoprefixer');

module.exports = {
    entry: {
        'material': glob.sync("./src/js/**/*.js"),
        'material-light': './src/sass/material.scss'
    },
    output: {
        path: path.resolve(__dirname, '/'),
        filename: process.env.NODE_ENV === 'development' ? './dist/js/[name].js' : './docs/dist/js/[name].js',
        publicPath: 'docs/dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: ['/node_modules/', './dist/', '/src/css', '/docs'],
                use: [
                    'babel-loader',
                    {
                        loader: 'eslint-loader',
                        options: {
                            fix: true
                        }
                    }
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: ['/node_modules', './dist', '/src/js', '/docs'],
                use: [
                    MiniCSSExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize: process.env.NODE_ENV === 'production',
                            publicPath: 'docs/dist/'
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            syntax: postCssScss,
                            plugins: () => [
                                autoprefixer,
                                postCssPresetEnv({
                                    stage: 0
                                }),
                            ],
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        overlay: true,
        contentBase: path.join(__dirname, './docs/'),
        publicPath: '/dist/',
        watchContentBase: true,
        open: true,
    },
    devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'source-map',
    plugins: [
        new MiniCSSExtractPlugin({
            filename: process.env.NODE_ENV === 'development' ? './dist/css/[name].css' : './docs/dist/css/[name].css',
        }),
        new CleanWebpackPlugin(['./dist/', './docs/dist']),
    ]
};

Со следующей файловой структурой:

/
   /docs/
       All html files
   /src/
      /js/
          All js files
      /sass/
          All sass files
   webpack.config.js
   packages.json

Я пытаюсь сделать следующее. Для разработки я использую сервер webpack dev для обслуживания содержимого из /docs directroy. Однако я бы хотел, чтобы URL-адреса в документах относились к URL-адресу /docs, чтобы я мог использовать страницы GitHub. Это означает, что в /docs/index.html я хотел бы сослаться на файл material.js как: ./dist/js. А для material-light.css как: ./dist/css. Я хотел бы сделать это, потому что при запуске производства файлы js, css сохраняются в каталог docs/dist/(css/js).

Но я не могу правильно понять ссылку. В приведенной выше конфигурации у меня docs/dist/ для публичного пути, но docs/dist/js также не работает. Проблема актуальна как для js, так и для css файлов.

Итак, мой вопрос: как я могу заставить publicPath работать как на сервере разработки веб-пакетов, так и на страницах github?

Связано, но не сработало:


webpack webpack-4 webpack-dev-server
person SuperDJ    schedule 07.09.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

С конфигурацией было несколько проблем. Задав тот же вопрос на github, я получил следующую конфигурацию :

const
    autoprefixer = require('autoprefixer'),
    CleanWebpackPlugin = require('clean-webpack-plugin'),
    glob = require('glob'),
    MiniCSSExtractPlugin = require('mini-css-extract-plugin'),
    path = require('path'),
    postCssPresetEnv = require('postcss-preset-env'),
    postCssScss = require('postcss-scss');

const OUTPUT_DIR = path.resolve(__dirname, 'docs');

module.exports = {
    entry: {
        'material': glob.sync("./src/js/**/*.js"),
        'material-light': './src/sass/material.scss'
    },
    output: {
        path: OUTPUT_DIR,
        filename: 'dist/js/[name].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: ['/node_modules/', './dist/', '/src/css', '/docs'],
                use: [
                    'babel-loader',
                    {
                        loader: 'eslint-loader',
                        options: {
                            fix: true
                        }
                    }
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: ['/node_modules', './dist', '/src/js', '/docs'],
                use: [
                    MiniCSSExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize: process.env.NODE_ENV === 'production',
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            syntax: postCssScss,
                            plugins: () => [
                                autoprefixer,
                                postCssPresetEnv({
                                    stage: 0
                                }),
                            ],
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        overlay: true,
        contentBase: OUTPUT_DIR,
        watchContentBase: true,
    },
    devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : 'source-map',
    resolve: {
        extensions: ['.js', '.css', '.styl', '.scss'],
        alias: {
            'js': path.resolve(__dirname, './src/js'),
            'css': path.resolve(__dirname, './src/css')
        }
    },
    plugins: [
        new MiniCSSExtractPlugin({
            filename: 'dist/css/[name].css',
        }),
        new CleanWebpackPlugin(['./dist/', './docs/dist']),
    ]
};
person SuperDJ    schedule 08.09.2018
comment
Привет, я вижу, что в итоге вы удалили параметр publicPath из конфигурации webpack. Значит, это никак не повлияло на то, как обслуживаются ваши пакеты? - person properchels; 04.08.2020
comment
@properchels, поскольку это вопрос двухлетней давности, который я не могу вспомнить - person SuperDJ; 04.08.2020