Загрузчик файлов Webpack 4 работает с файлами шрифтов, но не с файлами изображений - PullRequest
Новая
       20

Загрузчик файлов Webpack 4 работает с файлами шрифтов, но не с файлами изображений

0 голосов
/ 28 июня 2018

Я пытаюсь заставить Webpack 4 выводить файл .png в / dist / assets, и он используется моим файлом index.html через загрузчик файлов.

Файл .png выводит в dist / assets, но не загружается браузером. Забавно, но мои файлы .png обрабатываются так же, как файлы шрифтов в моем webpack.config.js, а файлы шрифтов загружаются браузером.

Ниже мой каталог файлов при сборке

File structure

Ниже приведен код из webpack.config.js, который, по моему мнению, имеет отношение к этой проблеме. 

module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },
   module: {
     rules: [
     ...
       {
          test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: './assets'
       }
     },
   ...

Весь файл webpack.config.js находится ниже или может быть найден (вместе с другими файлами) в хранилище , в котором размещен этот код. 

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      /*publicPath: 'dist'*/
  },
   module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
         test: /\.vue$/,
         //exclude: /node_modules/,
         loader: 'vue-loader',
       },
       {
         test: /\.(sa|sc)ss$/,
         exclude: /node_modules/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',
           'sass-loader' // Loads a sass / scss file and compiles it to CSS
         ]
       },
       {
         test: /\.css$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader'
         ]
       },
        {
           test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: './assets'
           }
        },
        {
          test: /\.svg$/,
          use: [
            'vue-svg-icon-loader'
          ],
        }
      ]
   },
   resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: 'bundle.css',
        chunckFilename: '[id].css',
      })
    ]
}

1 Ответ

0 голосов
/ 28 июня 2018

Я опробовал его, и он отлично работает с незначительными деталями.

Я думаю, что настоящая магия здесь в том, как wepback-dev-server находит ваш index.html, и, если что-то, я думаю, что должен сломаться. В любом случае:

Ваша сборка (npm run prod -> webpack --mode production) создает все нужные файлы, но нет никаких изменений в index.html, и в вашей папке dist не создается файл index.html. Обычно вы копируете индекс или генерируете его из шаблона для очистки кэша (copy-webpack-plugin / html-webpack-plugin), но сейчас я просто скопировал index.html в папку dist вручную.

Конечно, теперь индекс указывал на неправильные активы, поэтому я обновил: 

from:   href="./dist/bundle.css"   and   src="./dist/bundle.js"
  to:   href="./bundle.css"        and   src="./bundle.js"

и это сработало сразу (с placeholder.png и всем остальным). Папка dist - это то, что вы хотите обслуживать, поэтому убедитесь, что ваш индексный файл работает оттуда, а не из корневого каталога проекта.

Я использовал http-сервер для тестирования из папки dist.

...