当登录页面不在子目录中时，如何为多页 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.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');

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 /&nbsp; -home.html&nbsp; templates/&nbsp; &nbsp; -about.html&nbsp; js/&nbsp; &nbsp; -home.js&nbsp; &nbsp; -about.js&nbsp; images/&nbsp; &nbsp; -00.jpg&nbsp; &nbsp; -01.jpg&nbsp; scss/&nbsp; &nbsp; -style.scss您可以看到home.html是故意在主目录上而不是在/templates. images/图像源在home.html和其他地方引用../images/。现在html-loader，我copy-webpack-plugin以前需要 / 将图像从源目录复制到构建文件夹，而不是 ，就像html-loader在构建过程中更改路径一样。我试了几次才发现这html-loader是罪魁祸首。这是我最后的工作 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');const CopyPlugin = require('copy-webpack-plugin');module.exports = {&nbsp;context: path.resolve(__dirname, 'src'),&nbsp;entry: {&nbsp; &nbsp;home: './js/home.js',&nbsp; &nbsp;about: './js/about.js',&nbsp; },&nbsp;output: {&nbsp; &nbsp;filename: (pathData) => {&nbsp; &nbsp; &nbsp;return pathData.chunk.name === 'home' ? 'bundle.js' : '[name]/bundle.js';&nbsp; &nbsp;},&nbsp; &nbsp;path: path.resolve(__dirname, 'public_html')&nbsp;},&nbsp;module: {&nbsp; &nbsp;rules: [&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp;test: /\.js$/,&nbsp; &nbsp; &nbsp; &nbsp;exclude: /node_modules/,&nbsp; &nbsp; &nbsp; &nbsp;use: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;loader: "babel-loader"&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;},{&nbsp; &nbsp; &nbsp; &nbsp;test: /\.css$/,&nbsp; &nbsp; &nbsp; &nbsp;use: [MiniCssExtractPlugin.loader, "css-loader"]&nbsp; &nbsp; &nbsp;},{&nbsp; &nbsp; &nbsp; &nbsp;test: /\.sass$|\.scss$/,&nbsp; &nbsp; &nbsp; &nbsp;use: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MiniCssExtractPlugin.loader,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ loader: 'css-loader' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ loader: 'sass-loader' },&nbsp; &nbsp; &nbsp; &nbsp;],&nbsp; &nbsp; &nbsp;},{&nbsp; &nbsp; &nbsp; &nbsp;test: /\.(jpg|png|svg)$/,&nbsp; &nbsp; &nbsp; &nbsp;use: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;loader: 'file-loader',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name: '[path][name].[ext]'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;]&nbsp;},&nbsp;plugins: [&nbsp; &nbsp; new CopyPlugin({&nbsp; &nbsp; &nbsp; patterns: [&nbsp; &nbsp; &nbsp; &nbsp; {from:'./image',to:'image'}&nbsp;&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; }),&nbsp; &nbsp; new HtmlWebPackPlugin({&nbsp; &nbsp; &nbsp; hash: true,&nbsp; &nbsp; &nbsp; filename: 'index.html',&nbsp; &nbsp; &nbsp; // landing page remains in root directory&nbsp; &nbsp; &nbsp; template: 'index.html',&nbsp; &nbsp; &nbsp; chunks: ['home']&nbsp; &nbsp;}),&nbsp; &nbsp; new HtmlWebPackPlugin({&nbsp; &nbsp; &nbsp; hash: true,&nbsp; &nbsp; &nbsp; filename: 'about/index.html', // all other pages move to subdirectories&nbsp; &nbsp; &nbsp; template: 'templates/about.html',&nbsp; &nbsp; &nbsp; chunks: ['about']&nbsp; &nbsp;}),&nbsp; &nbsp;new MiniCssExtractPlugin({&nbsp; &nbsp; &nbsp; filename: "style.css"&nbsp; &nbsp;}),&nbsp; &nbsp;new CleanWebpackPlugin()&nbsp;]};

Answer 2

我以这种方式解决了问题。在视图上导入图像Import YourImage from '../../public/assets/img/your-image.png';在需要的地方调用并实施它们src={YourImage}或者在你的 classNamesbackground-image: `url(${YourImage})` 在 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' ]} } ]