[Gutenberg Webpack Mix] #gutenberg #mix #js

webpack.mix.js

const mix = require('laravel-mix');

const url       = 'http://lab.tinypixel.test';
const app       = './src';
const config    = './config';
const resources = './resources';
const assets    = './resources/assets';
const dist      = './dist';

const externals = {
  'lodash': 'lodash',
  'react': 'React',
  'react-dom': 'ReactDOM',
  '@wordpress/blocks': 'wp.blocks',
  '@wordpress/components': 'wp.components',
  '@wordpress/compose': 'wp.compose',
  '@wordpress/data': 'wp.data',
  '@wordpress/date': 'wp.date',
  '@wordpress/editor': 'wp.editor',
  '@wordpress/element': 'wp.element',
  '@wordpress/hooks': 'wp.hooks',
  '@wordpress/i18n': 'wp.i18n',
  '@wordpress/plugins': 'wp.plugins',
}

// Webpack
mix.webpackConfig({
  externals: externals,
})

// Babel
mix.babelConfig({
  'plugins': [
    [
      '@wordpress/babel-plugin-makepot', { 'output': 'languages/blocks.pot' },
    ],
  ],
})

// Settings
mix.setPublicPath(dist);

// Browsersync
mix.browserSync({
  proxy: `${url}`,
  files: [
    `${app}/**/*.php`,
    `${config}/**/*.php`,
    `${resources}/views/**/*.php`,
    `${dist}/styles/**.css`,
    `${dist}/scripts/**.js`,
  ],
});

// Sass
mix.sass(`${assets}/styles/main.scss`, `${dist}/styles`);

// Editor JS
mix.react(`${assets}/scripts/main.js`, `${dist}/scripts`);

// Frontend JS
mix.react(`${assets}/scripts/frontend/*.js`, `${dist}/scripts/frontend`);


// Assets
mix.copyDirectory(`${assets}/fonts`, `${dist}/fonts`)
   .copyDirectory(`${assets}/images`, `${dist}/images`)

// Source maps when not in production.
if (!mix.inProduction()) {
  mix.sourceMaps();
}

// Hash and version files in production.
if (mix.inProduction()) {
  mix.version()
     .then(() => {
       const manifest = File.find(`${dist}/mix-manifest.json`);
       const json = JSON.parse(manifest.read());
       Object.keys(json).forEach(key => {
         const hashed = json[key];
         delete json[key];
         json[key.replace(/^\/+/g, '')] = hashed.replace(/^\/+/g, '');
       });
       manifest.write(JSON.stringify(json, null, 2));
     });
}