Skip to content

Instantly share code, notes, and snippets.

Created July 15, 2017 06:27
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Basic Gutenberg Custom Block with ESNext, Webpack, BabelJS—
* 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: '',
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