Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Basic Gutenberg Custom Block with ESNext, Webpack, BabelJS— https://github.com/ahmadawais/Gutenberg-Boilerplate/tree/master/block/02-basic-esnext
/**
* Webpack Configuration
*
* Block: `02-basic-esnext` — The Webpack config file.
*
* Working of a Webpack can be very simple or complex. This is an intenally simple
* build configuration.
*
* Webpack basics — If you are new the Webpack here's all you need to know:
* 1. Webpack is a module bundler. It bundles different JS modules together.
* 2. It needs and entry point and an ouput to process file(s) and bundle them.
* 3. By default it only understands common JavaScript but you can make it
* understand other formats by way of adding a Webpack loader.
* 4. In the file below you will find an entry point, an ouput, and a babel-loader
* that tests all .js files excluding the ones in node_modules to process the
* ESNext and make it compatible with older browsers i.e. it converts the
* ESNext (new standards of JavaScript) into old JavaScript through a loader
* by Babel.
*
* Instructions: How to build or develop with this Webpack config:
* 1. In the command line browse the folder `02-basic-esnext` where
* this `webpack.config.js` file is present.
* 2. Run the `npm run dev` or `npm run build` for development or
* production respectively.
* 3. To read what these NPM Scripts do, read the `package.json` file.
*
* @since 1.0.0
*/
module.exports = {
entry: './block.js', // Webpack
output: {
path: __dirname,
filename: 'block.build.js',
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment