невозможно загрузить фоновое изображение на тело, используя webpack 4 в реагировать - PullRequest
Новая
       40

невозможно загрузить фоновое изображение на тело, используя webpack 4 в реагировать

0 голосов
/ 19 ноября 2018

в моем приложении реагирует на js. Я хочу добавить фоновое изображение на тело . Это нормально работает, когда я работаю в режиме разработки, но когда дело доходит до производства, этоне работает.
для производства, я использую dist отдельную папку, возможно, это создает проблему с путем.
здесь мой scss 

body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: $m-size;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url(/images/bg4.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top; 
    background-size:cover;
}

Мой webpack.config 

module.exports = {
    entry:{
      vendor: VENDOR_LIBS,
      main: './src/app.js',
    },
  output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/',
  },
  devtool: 'source-map',  
  module: {
    rules: [

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      { test: /\.bundle\.js$/, use: { loader: 'bundle-loader', options: {lazy: true} } },
      {
        test: /\.s?css$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader?url=false',
                options: {
                    sourceMap: true,
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }

        ]
    },{
        test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: "file-loader?name=[name].[ext]",
    }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist', {} ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: true,
      hash: true,
      template: './src/index.html',
      filename: 'index.html',
      favicon: './public/images/fav.ico'
    }),
    new WebpackMd5Hash(),
    new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify('production')
        }
      }),

  ],
  optimization: {
    splitChunks: {
        cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
          chunks: 'all',
          minChunks: 2
        },
      }
    },
    runtimeChunk: true,
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
        uglifyOptions: {
          compress: {
            inline: false
          }
        }
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
  },
};

веб-пакет генерирует другие изображения в base64 , но не для этого изображения, и недоступен в папке dist.

может кто-нибудь мне помочь, я искал много вопросов, но не мог решить.
Я не хочу, чтобы какая-либо внешняя ссылка загружала изображение .

1 Ответ

0 голосов
/ 23 ноября 2018

В работе ваш текущий каталог изменится на /dist/index.html, поэтому путь, который вы использовали для разработки /images/bg4.png, не может найти файл.

Решение состоит в том, чтобы скопировать файлы статического изображения, напримерваш фон, в папку /dist в процессе сборки.

Предполагается, что каталог вашего проекта похож на следующее: 

...
/images/bg4.png
package.json

Затем добавьте эти команды в ваш скрипт сборки webpack для копированияизображения в ваш производственный каталог /dist. 

// in package.json
"scripts": {
    ...
    "build": "...your webpack build commands... && cp -a images\\. dist\\images",
    ...
},

Ваши новые каталоги файлов будут выглядеть как 

/dist/...your index.html, bundles, etc...
     /images/bg4.png
/images/bg4.png
package.json

, и ваш путь к изображению теперь должен найти файл изображения.

...