当登录页面不在子目录中时，如何为多页 webpack 配置设置图像链接？

Question

我正在尝试多页 webpack 配置，并且有一个关于如何为登录页面加载图像与网站上其他页面不同的问题。登录页面构建到根目录，而其他页面构建到它们各自的子文件夹。Webpack../images/为其他页面附加了正确的相对路径，但是登录页面需要保持为images/，因为它与图像文件夹一起位于根目录中。如何配置 webpack<img src="images/00.jpg">以使登录页面保持不变，但<img src="../images/00.jpg">对所有其他页面进行更新？这是源文件夹：/ src /   -home.html   -about.html   js/      -home.js      -about.js   images/      -00.jpg      -01.jpg   scss/      -style.scss这是 webpack 生成的构建文件夹：/ public_html /   -index.html   // relative links in this file become broken :(   -bundle.js   about/      -index.html      -bundle.js   images/      -00.jpg      -01.jpg   css/      -style.css最后，这里是 webpack 的配置。请原谅代码墙，我决定包含整个配置，以防有更好的方法来设置它。// webpack.config.jsconst webpack = require('webpack');const path = require('path');const HtmlWebPackPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { entry: {   home: './src/js/home.js',   about: './src/js/about.js',  }, output: {   filename: (pathData) => {     return pathData.chunk.name === 'home' ? 'bundle.js' : '[name]/bundle.js';   },   path: path.resolve(__dirname, 'public_html') }, module: {   rules: [     {       test: /\.js$/,       exclude: /node_modules/,       use: {         loader: "babel-loader"       }     },{       test: /\.html$/,       use: [         {           loader: "html-loader",           options: { minimize: true }         }       ]     },{       test: /\.css$/,       use: [MiniCssExtractPlugin.loader, "css-loader"]     },{       test: /\.sass$|\.scss$/,       use: [         MiniCssExtractPlugin.loader,         { loader: 'css-loader' },         { loader: 'sass-loader' },       ],     }谢谢！另外，让我知道你喜欢这个配置文件！

Answer 1

我有它的工作。万岁！

我从来没有最终使用publicPath. 也许有办法改变它，但这最终成为了一条红鲱鱼。相反，我重组了我的src目录以遵循我正在寻找的模式，并删除了路径，html-loader因此在构建过程中路径不会改变。

这是我的新源目录：

/ src /

  -home.html

  templates/

    -about.html

  js/

    -home.js

    -about.js

  images/

    -00.jpg

    -01.jpg

  scss/

    -style.scss

您可以看到home.html是故意在主目录上而不是在/templates. images/图像源在home.html和其他地方引用../images/。

现在html-loader，我copy-webpack-plugin以前需要 / 将图像从源目录复制到构建文件夹，而不是 ，就像html-loader在构建过程中更改路径一样。我试了几次才发现这html-loader是罪魁祸首。

这是我最后的工作 webpack 配置记录。

// webpack.config.js

const webpack = require('webpack');

const path = require('path');

const HtmlWebPackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

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

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {

 context: path.resolve(__dirname, 'src'),

 entry: {

   home: './js/home.js',

   about: './js/about.js',

  },

 output: {

   filename: (pathData) => {

     return pathData.chunk.name === 'home' ? 'bundle.js' : '[name]/bundle.js';

   },

   path: path.resolve(__dirname, 'public_html')

 },

 module: {

   rules: [

     {

       test: /\.js$/,

       exclude: /node_modules/,

       use: {

         loader: "babel-loader"

       }

     },{

       test: /\.css$/,

       use: [MiniCssExtractPlugin.loader, "css-loader"]

     },{

       test: /\.sass$|\.scss$/,

       use: [

         MiniCssExtractPlugin.loader,

         { loader: 'css-loader' },

         { loader: 'sass-loader' },

       ],

     },{

       test: /\.(jpg|png|svg)$/,

       use: [

         {

           loader: 'file-loader',

           options: {

             name: '[path][name].[ext]'

           }

         }

       ]

     }

   ]

 },

 plugins: [

    new CopyPlugin({

      patterns: [

        {from:'./image',to:'image'} 

      ],

    }),

    new HtmlWebPackPlugin({

      hash: true,

      filename: 'index.html',      // landing page remains in root directory

      template: 'index.html',

      chunks: ['home']

   }),

    new HtmlWebPackPlugin({

      hash: true,

      filename: 'about/index.html', // all other pages move to subdirectories

      template: 'templates/about.html',

      chunks: ['about']

   }),

   new MiniCssExtractPlugin({

      filename: "style.css"

   }),

   new CleanWebpackPlugin()

 ]

};

Answer 2

我以这种方式解决了问题。

1. 在视图上导入图像

Import YourImage from '../../public/assets/img/your-image.png';

1. 在需要的地方调用并实施它们

src={YourImage}

或者在你的 classNames

background-image: `url(${YourImage})`

1. 在 webpack.config.js 文件的规则部分从 GitHub 配置项目存储库的路径。

存储库：“https://maikpwwq.github.io/your-repository/”

rules: [ { type: "asset", test: /\.(png|svg|jpg|gif|jpeg)$/i, use: [{ options: { publicPath: '/your-repository/'}, loader: 'file-loader' ]} } ]