Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get started with WebPack in WordPress today!
'use strict';
const autoprefixer = require('autoprefixer');
const browsers = require('@wordpress/browserslist-config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = function (env, options) {
const entry = {
main: [
'./src/js/stellar-places-map.js',
],
styles: [
'./src/css/stellar-places.css',
],
};
const paths = {
css: 'assets/css/',
img: 'assets/img/',
font: 'assets/font/',
js: 'assets/js/',
lang: 'languages/',
};
const mode = options.mode || 'development';
const extPrefix = mode === 'production' ? '.min' : '';
const loaders = {
css: {
loader: 'css-loader',
options: {
sourceMap: true,
},
},
postCss: {
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers,
flexbox: 'no-2009',
}),
],
sourceMap: true,
},
},
sass: {
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
};
const config = {
mode,
entry,
output: {
path: path.join(__dirname, '/'),
filename: `${paths.js}[name]${extPrefix}.js`,
},
module: {
rules: [
{
test: /\.js|.jsx|.es6/,
loader: 'babel-loader',
query: {
presets: [
'@wordpress/default',
],
plugins: [
[
'@wordpress/babel-plugin-makepot',
{
'output': `${paths.lang}translation.pot`,
}
],
'transform-class-properties',
],
},
exclude: /(node_modules|bower_components)/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
loaders.css,
loaders.postCss,
],
exclude: /(node_modules|bower_components)/,
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
loaders.css,
loaders.postCss,
loaders.sass,
],
exclude: /(node_modules|bower_components)/,
},
{
test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: paths.font,
},
},
],
exclude: /(node_modules|bower_components)/,
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: /(node_modules|bower_components)/,
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: `${paths.css}[name]${extPrefix}.css`,
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(mode),
}),
function (compiler) {
// Custom webpack plugin - remove generated JS files that aren't needed
compiler.hooks.emit.tap('RemoveEmptyJsFiles', function (compilation) {
compilation.chunks.forEach(chunk => {
if (!chunk.entryModule._identifier.includes('.js')) {
chunk.files.forEach(file => {
if (file.includes('.js')) {
delete compilation.assets[file];
}
});
}
});
});
},
],
externals: {
'@wordpress/a11y': 'wp.a11y',
'@wordpress/api-fetch': 'wp.apiFetch',
'@wordpress/api-request': 'wp.apiRequest',
'@wordpress/autop': 'wp.autop',
'@wordpress/blob': 'wp.blob',
'@wordpress/block-library': 'wp.blockLibrary',
'@wordpress/blocks': 'wp.blocks',
'@wordpress/block-serialization-default-parser': 'wp.blockSerializationDefaultParser',
'@wordpress/components': 'wp.components',
'@wordpress/compose': 'wp.compose',
'@wordpress/core-data': 'wp.coreData',
'@wordpress/data': 'wp.data',
'@wordpress/date': 'wp.date',
'@wordpress/deprecated': 'wp.deprecated',
'@wordpress/dom': 'wp.dom',
'@wordpress/dom-ready': 'wp.domReady',
'@wordpress/editor': 'wp.editor',
'@wordpress/edit-post': 'wp.editPost',
'@wordpress/element': 'wp.element',
'@wordpress/escape-html': 'wp.escapeHtml',
'@wordpress/format-library': 'wp.formatLibrary',
'@wordpress/hooks': 'wp.hooks',
'@wordpress/html-entities': 'wp.htmlEntities',
'@wordpress/i18n': 'wp.i18n',
'@wordpress/is-shallow-equal': 'wp.isShallowEqual',
'@wordpress/keycodes': 'wp.keycodes',
'@wordpress/notices': 'wp.notices',
'@wordpress/nux': 'wp.nux',
'@wordpress/plugins': 'wp.plugins',
'@wordpress/redux-routine': 'wp.reduxRoutine',
'@wordpress/rich-text': 'wp.richText',
'@wordpress/shortcode': 'wp.shortcode',
'@wordpress/token-list': 'wp.tokenList',
'@wordpress/url': 'wp.url',
'@wordpress/viewport': 'wp.viewport',
'@wordpress/wordcount': 'wp.wordcount',
backbone: 'Backbone',
jquery: 'jQuery',
lodash: 'lodash',
moment: 'moment',
react: 'React',
'react-dom': 'ReactDOM',
tinymce: 'tinymce',
underscore: '_',
},
devtool: 'source-map',
};
return config;
};
@wpscholar

This comment has been minimized.

Copy link
Owner Author

commented Mar 14, 2019

To start, copy the webpack.config.js file into your project's root directory. Customize the entry and paths constants to fit your needs.

If you don't have a package.json file in your project, run npm init.

Run this to install required dependencies:

npm i -D @babel/core @wordpress/babel-plugin-makepot @wordpress/babel-preset-default @wordpress/browserslist-config autoprefixer babel-loader babel-plugin-transform-class-properties css-loader mini-css-extract-plugin postcss-loader sass-loader webpack webpack-cli node-sass

Add this to your package.json file

"scripts": {
	  "build": "webpack -p",
	  "start": "webpack --watch"
}

Run npm start to run WebPack in development mode and automatically rebuild as files are changed.

Run npm run build to run a production build.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.