主页 / 问题 / 1106227
Accepted
Air
Asked:2020-04-06 16:51:34 +0000 UTC2020-04-06 16:51:34 +0000 UTC

如何为 webpack-dev-server 正确设置 publicPath 的路径

  • 772

有汇编...

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


const webpackConf = {
    entry: './frontend/app/app.js',
    output: {
        path: path.resolve(__dirname, './production'),
        filename: 'bundle.js',
        publicPath: 'production/'
    },
    devServer: {
        port: 80,
        overlay: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './index.html', // Комментарий №1 
            template: './frontend/main_pages/tamplate_en.html',
            title: "Index"
        }),
        new CleanWebpackPlugin()
    ]
};


module.exports = () => {
    return webpackConf;
};

一切正常，但是一旦我更改创建路径index.html （请参阅代码中上面的注释＃1），publicPath: 'production/'它就看不到index.html

我没试过的

publicPath: '生产/主页/'


publicPath: '主页/'

这就是我得到的...

在此处输入图像描述

我想出的唯一一件事就是改变创建路径index.html

当production您设置一条路径时，当development另一条...

这是正确的解决方案，还是有更简单的方法来解决这个问题？

补充...

生产程序集将转到此文件夹

路径：path.resolve(__dirname, './production'),

如果我有插件

new HtmlWebpackPluginindex.html在根目录创建production文件夹，然后一切正常，但我需要new HtmlWebpackPlugin 来创建production/main-pages/index.html文件夹

所以，当index.html不在production文件夹的根目录下，而是在production/main-pages/文件夹中时， devServer 看不到index.html，`publicPath: 'production/' 不起作用

webpack

1 个回答

  1. Best Answer

    了解devServer主要在哪里index.html

    publicPath: '/'必须指定项目根目录

    devServer:必须添加到

    contentBase: path.join(__dirname, 'production') 指向构建文件夹

    openPage: 'main-pages/en/index.html'明确指定要运行的文件

    openPage:您可以指定多个文件的数组

    openPage: ['main-pages/en/index.html', 'main-pages/ru/index.html', 'main-pages/ge/index.html']

    const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');


const webpackConf = {
    entry: './frontend/app/app.js',
    output: {
        path: path.resolve(__dirname, './production'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        port: 80,
        overlay: true,
        contentBase: path.join(__dirname, 'production'),
        openPage: 'main-pages/en/index.html'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './main-pages/en/index.html',
            template: './frontend/main_pages/tamplate_en.html',
            title: "Index EN"
        }),
        new HtmlWebpackPlugin({
            filename: './main-pages/ru/index.html',
            template: './frontend/main_pages/tamplate_ru.html',
            title: "Index RU"
        }),
        new HtmlWebpackPlugin({
            filename: './main-pages/ge/index.html',
            template: './frontend/main_pages/tamplate_ge.html',
            title: "Index GE"
        }),
        new CleanWebpackPlugin()
    ]
};



module.exports = () => {
    return webpackConf;
};
    • 2

相关问题