Webpack - копировать файлы изображений

Question

Я в настоящее время использую Webpack для упаковки нашего приложения Angular2, и я столкнулся с проблемой.

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

Вот моя текущая иерархия файлов:

config 
    | - webpack.common.js 
app   
    |- static 
     | - css 
      | - ... 
     | - fonts 
      | - ... 
     | - img 
      | - someimage.png 
      | - anotherimage.png 
    |- main.ts 

и (полное) webpack.common.js:

var path = require("path") 
var webpack = require("webpack") 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {  
    entry: { 
     app: './app/main.ts', 
    }, 
    output: { 
     filename: 'js/[name].js', 
     path:'./built', 
     chunkFilename: 'bundles/[id].chunk.js' 
    }, 


    module: { 
     loaders: [ 
     { 
      test: /\.ts$/, 
      loader: 'ts', 
      exclude:'./out/' 
     }, 
     {   
      test: /\.(jpe?g|png|gif|svg)$/i, 
      include: [ 
       path.resolve(__dirname, '/app/static/img/'), 
       ], 
      loader: 'file?name=[path][name].[ext]&context=./src', 

     } 
     ] 
    }, 

    resolve: { 
     extensions: ['', '.js', '.ts', '.gif'] 
    }, 


    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html' 
     }) 
    ] 
} 

Для выполнения Webpack я играю команду:

webpack --config Config/webpack.common.js --bail 

Файл ts правильно транслируется в javascript и копируется в выходной каталог, файл index.html также является pr но нет ни одного из моих файлов изображений.

Я думаю, что что-то не так в моем файле конфигурации, но я не вижу, что. Я ударяю головой об этом много часов, поэтому любая помощь будет очень оценена.

Спасибо

Answer 1

Вы должны использовать URL-загрузчик для загрузки изображений. Пример кода приведен ниже.

{ 
    module: { 
    loaders: [ 
     { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' } 
    ] 
    } 
} 

Вы ссылаетесь на файлы gif или соответствующие файлы css/sass внутри вашего js-файла входа.

entry: { 
     app: './app/main.ts', 
    } 

Webpack загрузит все файлы, имеющие ссылку в точке входа. Если все ваши файлы не находятся в одной точке входа. Затем вы можете добавить несколько точек входа, как показано ниже.

entry: { 
     app: './app/main.ts', 
     image: './app/something.ts' 
    } 

Кроме того, я бы поставил webpack.config.js файл непосредственно в корневом каталоге, чтобы иметь более широкий доступ ко всей экосистеме. Попробуйте переместить его из папки конфигурации в корневую папку.

Answer 2

Создание отдельной точки входа для изображений может быть не таким, какой вы хотите, в зависимости от того, как вы создаете часть CSS проекта. В качестве альтернативы вы можете копировать статические файлы с помощью команды copy-webpack-plugin или grunt/gulp.