destripution 文件夹中的 webpack 资产路径是绝对的，因此无法正常工作答案

【问题标题】：webpack assets paths in destripution folder are absolute so not workingdestripution 文件夹中的 webpack 资产路径是绝对的，因此无法正常工作
【发布时间】：2021-02-20 13:30:05
【问题描述】：

我在我的 webpack 项目中安排了资产路径，它在 webpack-dev-server 下运行良好，但发布项目（使用 Github 页面）；浏览器似乎无法访问资产，因为它的绝对路径

例如，

我有 src/components/banner.html 如下所示

<div class="c-banner ">
    <h3 class="c-banner__title">banner header</h3>
    <p class="c-banner__desc">
            banner body  
    </p>
    <a href="#" class="c-btn c-btn--ghost c-banner__action">more</a>
    <i class="c-icon c-icon--flag c-banner__icon"></i>
    <i class="c-icon c-icon--cancel-circle c-banner__close js-banner__close"></i>
    <img src="../assets/images/profile.png" alt="">
</div>

它捆绑在 dist/components/banner.html 中，如下所示

<head><link href="/assets/css/styles.css" rel="stylesheet"></head>
<div class="c-banner ">
    <h3 class="c-banner__title">banner header</h3>
    <p class="c-banner__desc">
        banner body    
    </p>
    <a href="#" class="c-btn c-btn--ghost c-banner__action">more</a>
    <i class="c-icon c-icon--flag c-banner__icon"></i>
    <i class="c-icon c-icon--cancel-circle c-banner__close js-banner__close"></i>
    <img src="/assets/images/profile.png" alt="">
    
</div>
<script src="/main.js"></script><script src="/assets/js/banner.js"></script>

我的 webpack.config.js

var path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ASSET_PATH = process.env.ASSET_PATH || '/';
const webpack = require('webpack');

module.exports = {
  entry:  {
    'main': './src/index.js',
    'assets/js/banner': './src/assets/js/banner.js',
  },

  output: {
    path: path.join(__dirname, "/dist"),
    publicPath: ASSET_PATH ,
    filename: '[name].js',
  }, 

  devServer: {
    contentBase: path.join(__dirname, "/dist"),
    port: 1111,
    writeToDisk: true,
  },

  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          }
        ]
      },

      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader, 
            options: {
              publicPath: '/' 
            }
          },
          "css-loader",
          "postcss-loader",
          "sass-loader"
            
        ]
      },

      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          {
            loader: "file-loader", 
            options: {
              name: '[name].[ext]',
              outputPath: "assets/images",
            }
          }
        ]
      },

      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: [
          {
            loader: "file-loader", 
            options: {
              name: '[name].[ext]',
              outputPath: "assets/fonts",
            }
          }
        ]
      },
      
    ]
  },

  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

    new HtmlWebpackPlugin({ 
        filename: "index.html",
        template: "./src/index.html",
        chunks: ['main', 'assets/js/banner']
    }),

    new HtmlWebpackPlugin({ 
        filename: "components/banner.html",
        template: "./src/components/banner.html",
        chunks: ['main', 'assets/js/banner']
    }),

    new HtmlWebpackPlugin({ 
      filename: "components/button.html",
      template: "./src/components/button.html",
      chunks: ['main']
    }),

    new MiniCssExtractPlugin({filename: "assets/css/styles.css"}),
    new OptimizeCSSAssetsPlugin({}),
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
    }),

  ],
  
}

项目结构

字体路径、CSS 和 js 文件中的相同问题

【问题讨论】：

标签： javascript html jquery css webpack

【解决方案1】：

您可以将输出中的publicPath 更改为''，如下所示：

output: {
    path: path.join(__dirname, "/dist"),
    publicPath: '' ,
    filename: '[name].js',
  },

并将 MiniCssExtractPlugin 配置的publicPath 更改为'../../'：

{
  loader: MiniCssExtractPlugin.loader, 
  options: {
    publicPath: '../../' 
  }
},

【讨论】：

【解决方案2】：

您可以在您的服务器上将publicPath 更改为正确的，例如使用环境变量：

  //...
  const publicPath = process.env.BASE_URL || '/';
  output: {
    path: path.join(__dirname, "/dist"),
    publicPath:,
    filename: '[name].js',
  },
  //...

【讨论】：

它没有意义，像以前一样，在开发服务器上工作而不是使用 file:///E:/answerwebpackpath/dist/index.html ...所以它不会工作分布中