javascript - 图片不在生产构建中显示，仅在开发中显示(webpack/sass-loader)

Question

当我在 webpack 开发服务器上运行我的应用程序时，我所有的图像文件都在工作，无论是作为我的 index.html 中的 img 标签还是 background-image: url()..

虽然在生产构建中运行我的项目，但我收到无法找到的文件引用错误。

GET file:///img/featured.png net::ERR_FILE_NOT_FOUND
GET file:///img/header-img1-1.jpg net::ERR_FILE_NOT_FOUND

我添加了复制 webpack 插件，因为我认为这会将所有图像从我的 src/img 文件夹移动到 dist 中的我的 img 文件夹。

我应该为 webpack-dev-server 使用 contentBase 选项吗？还是 copy-webpack-plugin 没有得到正确的引用？ super 糊涂

项目树:

- webpack.config.js
- package.json
- .babelrc
- src
  - js
    - index.js
    - ...
  - img
    - ALL IMAGES LOCATED HERE
  - scss
    - layout
      - landing.scss
      - brands.scss 
    - base
  - index.html

里面landing.scss我用过

background: url('~/img/img-title.png')

其他文件如 brands.scss 相同

background: url('~/img/img-title.png')

一切都很好，我想我对 webpack/sass 加载程序如何引用图像感到困惑，而且似乎无法弄清楚如何让图像路径同时适用于开发/生产，我似乎一次只能让一个人工作。

生产树:

- dist
  - css
  - img
  - js
  - index.html

webpack.config.js:

const path = require('path');
const autoprefixer = require('autoprefixer');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractPlugin = new ExtractTextPlugin({
  filename: 'css/main.css'
});

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env) => {
  const isProduction = env.production === true

  return {
	entry: './src/js/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'js/bundle.js', 
	},
	module: {
	  rules: [
		{
	      test: /\.js$/,
	      include: path.resolve(__dirname, 'src'),
		  use: 'babel-loader' 
		},
		{
		  test: /\.css$|\.scss$/,
		  include: path.resolve(__dirname, 'src'),
		  use: extractPlugin.extract({  
			fallback: "style-loader",
			use: [
			  { loader: 'css-loader', options: { importLoaders: 2, sourceMap: true }},
			  { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [autoprefixer] }},
			  { loader: 'sass-loader', options: { sourceMap: true }},
			],
		  }) 
		},
		{
		  test: /\.html$/,
		  use: ['html-loader']
		},
		{
		  test: /\.(jpe?g|png|gif)$/,
		  use: [
			{
		      loader: 'url-loader',
			  options: {
				limit: 1000,
				name: 'img/[name].[ext]',
			  }
			}
		  ]
		}
	  ]
	},
	plugins: [
	  extractPlugin,
	  new HtmlWebpackPlugin({ 
		filename: 'index.html',
		inject: true,
		template: './src/index.html'
	  }),
	  new ScriptExtPlugin({
	    defaultAttribute: 'async'
	  }),
	  new CleanWebpackPlugin(['dist']),
	  new CopyWebpackPlugin([
	    {from:'src/img',to:'img'} 
	  ]), 
	]
  }
}

Answer 1

我认为您在生产中使用的文件夹结构与在本地使用的不同，即在本地，它只是 http://localhost:PORT/app ，但在产品上，它必须类似于 http://produrl/Some_Folder/app

现在进入实际问题 - 这是您的 CSS 加载器。

默认情况下 css-loader 具有 url=true，导致所有 URL 都相对于根进行映射。因此这对你有用 -

background: url('~/img/img-title.png')

但这不是

background: url('../../img/img-title.png')

只需设置 url=false，您就可以提供相对 URL，它会针对所有环境正确加载。