Сократите изображения, используя пакет Webpack - PullRequest
Новая
       16

Сократите изображения, используя пакет Webpack

0 голосов
/ 09 октября 2018

Я пытался настроить Encore для нового проекта.CSS и JS работают правильно, но я хочу пойти немного дальше с изображениями.До сих пор я только создаю копию своих изображений в моей сборке с той же архитектурой: 

//file: webpack.config.js
let Encore = require('@symfony/webpack-encore');

Encore
// the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addEntry('js/admin', './assets/js/admin.js')
    .addStyleEntry('css/app', './assets/css/app.scss')
    .addStyleEntry('css/bootstrap-datepicker', './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css')

    //assures compatibility in case of same file name
    .configureFilenames({
        images: '[path][name].[hash:8].[ext]',
    })

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function (options) {
        // https://github.com/sass/node-sass#options
        options.includePaths = ['assets/compass_src'];
    })

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()
    .cleanupOutputBeforeBuild()
;

module.exports = Encore.getWebpackConfig();

И я управляю своими изображениями так: 

//file: app.js
const imagesContext = require.context('../images', true, /\.(png|jpg|jpeg|gif|ico|svg|webp)$/);
imagesContext.keys().forEach(imagesContext);

Я пыталсяиспользуя glob для минимизации (сжатия без потерь) моих изображений, но они не увенчались успехом.

Как мне минимизировать мои изображения?

1 Ответ

0 голосов
/ 09 октября 2018

Вы можете использовать плагин image-webpack-loader и добавить его в webpack.config.js: 

.addLoader({
   test: /\.(gif|png|jpe?g|svg)$/i,
   loader: 'image-webpack-loader',
   options: {
      bypassOnDebug: true, //only minify during production
      plugins: [
          {removeTitle: true},
          {convertColors: {shorthex: false}},
          {convertPathData: false}
         ]
      },
  })

Для управления изображениями вы можете создать файл image.jsи загрузите ваши изображения так: 

require.context('../images', true, /\.jpe?g$|.png$|.svg$|.gif$/);

Более подробную информацию можно найти здесь

...