Skip to content
This repository has been archived by the owner on May 2, 2022. It is now read-only.

Commit

Permalink
Port Webpack to the plugin.
Browse files Browse the repository at this point in the history
  • Loading branch information
samikeijonen committed Apr 11, 2019
1 parent 80f5076 commit 3900278
Show file tree
Hide file tree
Showing 17 changed files with 9,468 additions and 13,809 deletions.
77 changes: 51 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ At 10up, we strive to provide digital products that yield a top-notch user exper

## Dependencies

1. [Node & NPM](https://www.npmjs.com/get-npm) - Build packages and 3rd party dependencies are managed through NPM, so you will need that installed globally
2. [Gulp](https://gulpjs.com/) - Gulp is used as the main task runner, it runs PostCSS, processes images, handles SVG sprites (if needed), and executes Webpack
3. [Webpack](https://webpack.js.org/) - Webpack is used to process the JavaScript
1. [Node & NPM](https://www.npmjs.com/get-npm) - Build packages and 3rd party dependencies are managed through NPM, so you will need that installed globally.
3. [Webpack](https://webpack.js.org/) - Webpack is used to process the JavaScript, CSS, and other assets.
4. [Composer](https://getcomposer.org/) - Composer is used to manage PHP.

## Getting Started
Expand Down Expand Up @@ -45,15 +44,33 @@ The NPM commands will fail without these files present.
- `cd` into the plugin folder
- run `npm run start` to build the front-end assets

## NPM Commands
## Webpack config

Webpack config files can be found in `config` folder:

`npm run start` (install dependencies and run initial gulp)
- `webpack.dev.js`
- `webpack.common.js`
- `webpack.prod.js`
- `webpack.settings.js`

`npm run watch` (watch)
In most cases `webpack.settings.js` is the main file which would change from project to project. For example adding or removing entry points for JS and CSS.

`npm run build` (build all front-end files)
## NPM Commands

`npm run build-release` (build all front-end files for release)
- `npm run test` (runs phpunit)
- `npm run start` (install dependencies)
- `npm run watch` (watch)
- `npm run build` (build all files)
- `npm run build-release` (build all files for release)
- `npm run dev` (build all files for development)
- `npm run lint-release` (install dependencies and run linting)
- `npm run lint-css` (lint CSS)
- `npm run lint-js` (lint JS)
- `npm run lint-php` (lint PHP)
- `npm run lint` (run all lints)
- `npm run format-js` (format JS using eslint)
- `npm run format` (alias for `npm run format-js`)
- `npm run test-a11y` (run accessibility tests)

## Composer Commands

Expand All @@ -73,30 +90,38 @@ We don't know everything! We welcome pull requests and spirited, but respectful,

## Learn more about the default packages used with this project

- [Babel core](https://www.npmjs.com/package/babel-core)
- [Babel eslint](https://www.npmjs.com/package/babel-eslint)
- [10up Eslint config](https://www.npmjs.com/package/@10up/eslint-config)
- [10up Stylelint config](https://www.npmjs.com/package/@10up/stylelint-config)
- [Babel core](https://www.npmjs.com/package/@babel/core)
- [Babel Eslint](https://www.npmjs.com/package/babel-eslint)
- [Babel loader](https://www.npmjs.com/package/babel-loader)
- [Babel preset env](https://www.npmjs.com/package/babel-preset-env)
- [Browserslist](https://www.npmjs.com/package/browserslist)
- [Babel preset env](https://www.npmjs.com/package/@babel/preset-env)
- [Babel register](https://www.npmjs.com/package/@babel/register)
- [Browsersync](https://browsersync.io/)
- [Browsersync Webpack plugin](https://www.npmjs.com/package/browser-sync-webpack-plugin)
- [Browserslist](https://www.npmjs.com/package/browserslist)
- [Can I Use DB](https://www.npmjs.com/package/caniuse-db)
- [Del](https://www.npmjs.com/package/del)
- [Clean Webpack plugin](https://www.npmjs.com/package/clean-webpack-plugin)
- [Copy Webpack plugin](https://www.npmjs.com/package/copy-webpack-plugin)
- [CSS loader](https://www.npmjs.com/package/css-loader)
- [CSS nano](https://www.npmjs.com/package/cssnano)
- [Eslint](https://www.npmjs.com/package/eslint)
- [Eslint loader](https://www.npmjs.com/package/eslint-loader)
- [Gulp](https://www.npmjs.com/package/gulp)
- [Gulp CSSNano](https://www.npmjs.com/package/gulp-cssnano)
- [Gulp filter](https://www.npmjs.com/package/gulp-filter)
- [Gulp PostCSS](https://www.npmjs.com/package/gulp-postcss)
- [Gulp Rename](https://www.npmjs.com/package/gulp-rename)
- [Gulp Sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps)
- [PostCSS CSSNext](https://www.npmjs.com/package/gulp-postcss)
- [Husky@next](https://www.npmjs.com/package/husky)
- [Lint Staged](https://www.npmjs.com/package/lint-staged)
- [Mini CSS extract plugin](https://www.npmjs.com/package/mini-css-extract-plugin)
- [PostCSS Import](https://www.npmjs.com/package/postcss-import)
- [Pump](https://www.npmjs.com/package/pump)
- [Require DIR](https://www.npmjs.com/package/require-dir)
- [Run Sequence](https://www.npmjs.com/package/run-sequence)
- [PostCSS loader](https://www.npmjs.com/package/postcss-loader)
- [PostCSS preset-env](https://www.npmjs.com/package/postcss-preset-env)
- [Stylelint](https://www.npmjs.com/package/stylelint)
- [Stylelint config WordPress](https://www.npmjs.com/package/stylelint-config-wordpress)
- [Stylelint declaration use variable](https://www.npmjs.com/package/stylelint-declaration-use-variable)
- [Stylelint order](https://www.npmjs.com/package/stylelint-order)
- [Stylelint Webpack plugin](https://www.npmjs.com/package/stylelint-webpack-plugin)
- [Terser](https://www.npmjs.com/package/terser)
- [Webpack](https://www.npmjs.com/package/webpack)
- [Webpack CLI](https://www.npmjs.com/package/webpack-cli)
- [Webpack Stream](https://www.npmjs.com/package/webpack-stream)
- [Husky@next](https://www.npmjs.com/package/husky)
- [Lint Staged](https://www.npmjs.com/package/lint-staged)
- [Webpack fix style only entries](https://www.npmjs.com/package/webpack-fix-style-only-entries)
- [Webpack merge](https://www.npmjs.com/package/webpack-merge)
- [Webpackbar](https://www.npmjs.com/package/webpackbar)
- [PHPCS](https://github.com/squizlabs/PHP_CodeSniffer)
141 changes: 141 additions & 0 deletions config/webpack.common.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/* global process, module, require */

const path = require( 'path' );
const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const StyleLintPlugin = require( 'stylelint-webpack-plugin' );
const WebpackBar = require( 'webpackbar' );

const isProduction = 'production' === process.env.NODE_ENV;

// Config files.
const settings = require( './webpack.settings.js' );

/**
* Configure entries.
*/
const configureEntries = () => {
const entries = {};

for ( const [ key, value ] of Object.entries( settings.entries ) ) {
entries[ key ] = path.resolve( process.cwd(), value );
}

return entries;
};

module.exports = {
entry: configureEntries(),
output: {
path: path.resolve( process.cwd(), settings.paths.dist.base ),
filename: settings.filename.js,
},

// Console stats output.
// @link https://webpack.js.org/configuration/stats/#stats
stats: settings.stats,

// External objects.
externals: {
jquery: 'jQuery',
},

// Performance settings.
performance: {
maxAssetSize: settings.performance.maxAssetSize,
},

// Build rules to handle asset files.
module: {
rules: [
// Lint JS.
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},

// Scripts.
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-env' ],
cacheDirectory: true,
sourceMap: ! isProduction,
},
},
],
},

// Styles.
{
test: /\.css$/,
include: path.resolve( process.cwd(), settings.paths.src.css ),
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: ! isProduction,
// We copy fonts etc. using CopyWebpackPlugin.
url: false,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: ! isProduction,
},
},
],
},
],
},

plugins: [

// Remove the extra JS files Webpack creates for CSS entries.
// This should be fixed in Webpack 5.
new FixStyleOnlyEntriesPlugin( {
silent: true,
} ),

// Clean the `dist` folder on build.
new CleanWebpackPlugin(),

// Extract CSS into individual files.
new MiniCssExtractPlugin( {
filename: settings.filename.css,
chunkFilename: '[id].css',
} ),

// Copy static assets to the `dist` folder.
new CopyWebpackPlugin( [
{
from: settings.copyWebpackConfig.from,
to: settings.copyWebpackConfig.to,
context: path.resolve( process.cwd(), settings.paths.src.base ),
},
] ),

// Lint CSS.
new StyleLintPlugin( {
context: path.resolve( process.cwd(), settings.paths.src.css ),
files: '**/*.css',
} ),

// Fancy WebpackBar.
new WebpackBar(),
],
};
29 changes: 29 additions & 0 deletions config/webpack.dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/* global module, require */

const merge = require( 'webpack-merge' );
const common = require( './webpack.common.js' );
const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' );

// Config files.
const settings = require( './webpack.settings.js' );

module.exports = merge( common, {
mode: 'development',
devtool: 'inline-cheap-module-source-map',
plugins: [
// Run BrowserSync.
new BrowserSyncPlugin(
{
host: settings.BrowserSyncConfig.host,
port: settings.BrowserSyncConfig.port,
proxy: settings.BrowserSyncConfig.proxy,
open: settings.BrowserSyncConfig.open,
files: settings.BrowserSyncConfig.files,
},
{
injectCss: true,
reload: false,
}
),
],
} );
48 changes: 48 additions & 0 deletions config/webpack.prod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* global module, require */

const merge = require( 'webpack-merge' );
const common = require( './webpack.common.js' );
const TerserPlugin = require( 'terser-webpack-plugin' );

module.exports = merge( common, {
mode: 'production',

optimization: {
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
sourceMap: false,
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending futher investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2
},
output: {
ecma: 5,
comments: false
},
ie8: false
}
} )
],
},
} );
70 changes: 70 additions & 0 deletions config/webpack.settings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/* global module */

// Webpack settings exports.
module.exports = {
entries: {
// JS files.
'admin': './assets/js/admin/admin.js',
'frontend': './assets/js/frontend/frontend.js',
'shared': './assets/js/shared/shared.js',

// CSS files.
'admin-style': './assets/css/admin/admin-style.css',
'editor-style': './assets/css/frontend/editor-style.css',
'shared-style': './assets/css/shared/shared-style.css',
'style': './assets/css/frontend/style.css',
},
filename: {
js: 'js/[name].js',
css: 'css/[name].css'
},
paths: {
src: {
base: './assets/',
css: './assets/css/',
js: './assets/js/'
},
dist: {
base: './dist/',
clean: ['./images', './css', './js']
},
},
stats: {
// Copied from `'minimal'`.
all: false,
errors: true,
maxModules: 0,
modules: true,
warnings: true,
// Our additional options.
assets: true,
errorDetails: true,
excludeAssets: /\.(jpe?g|png|gif|svg|woff|woff2)$/i,
moduleTrace: true,
performance: true
},
copyWebpackConfig: {
from: '**/*.{jpg,jpeg,png,gif,svg,eot,ttf,woff,woff2}',
to: '[path][name].[ext]'
},
BrowserSyncConfig: {
host: 'localhost',
port: 3000,
proxy: 'http://tenup-scaffold.test',
open: false,
files: [
'**/*.php',
'dist/js/**/*.js',
'dist/css/**/*.css',
'dist/svg/**/*.svg',
'dist/images/**/*.{jpg,jpeg,png,gif}',
'dist/fonts/**/*.{eot,ttf,woff,woff2,svg}'
]
},
performance: {
maxAssetSize: 100000
},
manifestConfig: {
basePath: ''
},
};
Loading

0 comments on commit 3900278

Please sign in to comment.