Webpack configuration for Wordpress plugin development. Includes: package file for install and three environmnet build config files.
{ | |
"name": "webpack-in-wordpress", | |
"version": "1.0.0", | |
"description": "Compiles scss into css and babels js files", | |
"main": "index.js", | |
"scripts": { | |
"build": "webpack --config webpack.config.prod.js", | |
"start": "webpack --config webpack.config.dev.js --progress --watch", | |
"test": "webpack --config webpack.config.test.js --progress --watch" | |
}, | |
"browserslist": [ | |
"last 3 major versions", | |
"> 1%", | |
"IE 11", | |
"Safari 10.1", | |
"iOS 10" | |
], | |
"devDependencies": { | |
"@babel/core": "^7.5.5", | |
"@babel/preset-env": "^7.5.5", | |
"babel-loader": "^8.0.6", | |
"browser-sync": "^2.26.7", | |
"browser-sync-webpack-plugin": "^2.2.2", | |
"clean-webpack-plugin": "^3.0.0", | |
"copy-webpack-plugin": "^5.0.4", | |
"css-loader": "^3.1.0", | |
"glob": "^7.1.4", | |
"imagemin-gifsicle": "^6.0.1", | |
"imagemin-jpegtran": "^6.0.0", | |
"imagemin-optipng": "^7.0.0", | |
"imagemin-svgo": "^7.0.0", | |
"imagemin-webpack-plugin": "^2.4.2", | |
"mini-css-extract-plugin": "^0.8.0", | |
"node-sass": "^4.12.0", | |
"optimize-css-assets-webpack-plugin": "^5.0.3", | |
"postcss-loader": "^3.0.0", | |
"postcss-preset-env": "^6.7.0", | |
"sass-loader": "^7.1.0", | |
"standard": "^13.1.0", | |
"style-loader": "^0.23.1", | |
"terser-webpack-plugin": "^1.4.1", | |
"webpack": "^4.38.0", | |
"webpack-cli": "^3.3.6" | |
}, | |
"dependencies": {} | |
} |
/** | |
* Dev Webpack mode | |
* Uses regular Webpack not Webpack-server. | |
* Uses BrowserSync to create a local server. | |
* Watch mode compiles and reloads on changes. | |
* Simplified version doesn't minify, etc.. to make process faster. | |
*/ | |
const path = require('path'); | |
const webpack = require('webpack'); | |
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); | |
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
module.exports = { | |
mode: 'development', | |
entry: { | |
myApp_admin: "./src/scss/admin_styles.scss", | |
myApp: [ "./src/index.js" ], | |
}, | |
output: { | |
filename: 'js/[name].js', | |
path: path.resolve(__dirname, "assets") | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.s[c|a]ss$/, | |
use: [ | |
{ | |
loader: MiniCssExtractPlugin.loader, | |
}, | |
'css-loader', | |
'sass-loader', | |
], | |
}, | |
] | |
}, | |
plugins: [ | |
new MiniCssExtractPlugin({ | |
filename: "css/[name].css" | |
}), | |
new BrowserSyncPlugin( | |
// BrowserSync options | |
{ | |
files: '**/*.php', | |
// browse to http://localhost:3000/ during development | |
host: 'localhost', | |
port: 3000, | |
proxy: 'http://yourlocalserver.dev/', | |
}, | |
// plugin options | |
{ | |
// reload: true, | |
// injectCss: true, // doesn't work | |
injectChanges: true, | |
} | |
), | |
], | |
}; |
/** | |
* Final production version. | |
* Minify CSS and JS | |
* Babel and Browser prefix for backwards compatibility | |
* Image minification and copy files to assets | |
*/ | |
const path = require("path"); | |
const webpack = require('webpack'); // to access built-in plugins | |
// deletes the assets | |
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); | |
// extracts css into a separate file rather than being in the js file | |
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
// minifies css | |
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); | |
// minifies js | |
const TerserPlugin = require('terser-webpack-plugin'); | |
// enables autoprefixing and other compatibility fixes from postcssPresetEnv | |
const postcss = require('postcss'); | |
const postcssPresetEnv = require('postcss-preset-env'); | |
// Copy files from one folder to another | |
const CopyPlugin = require('copy-webpack-plugin'); | |
// Image optimization | |
const ImageminPlugin = require('imagemin-webpack-plugin').default; | |
const glob = require('glob'); | |
module.exports = { | |
// splitting into two entries generates multiple css files but unfortunately, also two js files | |
entry: { | |
myApp_admin: "./src/scss/admin_styles.scss", | |
myApp: "./src/index.js" | |
}, | |
output: { | |
filename: "js/[name].js", | |
path: path.resolve(__dirname, "assets") | |
}, | |
mode: 'production', | |
plugins: [ | |
new webpack.ProgressPlugin(), | |
new CleanWebpackPlugin(), | |
new MiniCssExtractPlugin({ | |
filename: "css/[name].css" | |
}), | |
// loads the images into the flow to be processed by the imagemin | |
new CopyPlugin([ | |
{ | |
from: 'img/**/*', | |
to: 'img/[name].[ext]', | |
context: 'src/', | |
} | |
]), | |
new ImageminPlugin({ | |
test: /\.(jpe?g|png|gif|svg)$/i, | |
bail: false, // Ignore errors on corrupted images | |
cache: true, | |
imageminOptions: { | |
plugins: [ | |
["gifsicle", { interlaced: true }], | |
["jpegtran", { progressive: true }], | |
["optipng", { optimizationLevel: 5 }], | |
[ | |
"svgo", | |
{ | |
plugins: [ | |
{ | |
removeViewBox: false | |
} | |
] | |
} | |
] | |
] | |
} | |
}) | |
], | |
optimization: { | |
minimizer: [ | |
new OptimizeCSSAssetsPlugin({ | |
cssProcessorOptions: { | |
discardComments: true, | |
map: { | |
inline: false, | |
annotation: true, | |
}, | |
safe: true, | |
}, | |
}), | |
new TerserPlugin({ | |
parallel: true, | |
terserOptions: { | |
safari10: true | |
} | |
}), | |
], | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
use: { | |
loader: "babel-loader", | |
options: { | |
presets: ['@babel/preset-env'], | |
} | |
} | |
}, | |
{ | |
test: /\.scss$/, | |
use: [ | |
MiniCssExtractPlugin.loader, | |
'css-loader', | |
{ | |
loader: 'postcss-loader', | |
options: { | |
ident: 'postcss', | |
plugins: [ | |
require('postcss-preset-env') | |
] | |
} | |
}, | |
'sass-loader', | |
], | |
}, | |
] | |
} | |
}; |
/** | |
* Dev Webpack mode for cross-browser fixing | |
* Uses regular Webpack not Webpack-server. | |
* Uses BrowserSync to create a local server. | |
* Watch mode compiles and reloads on changes. | |
* Slower, css and js minification version. | |
*/ | |
const path = require('path') | |
const webpack = require('webpack') | |
const BrowserSyncPlugin = require('browser-sync-webpack-plugin') | |
const { CleanWebpackPlugin } = require('clean-webpack-plugin') | |
const MiniCssExtractPlugin = require("mini-css-extract-plugin") | |
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") | |
const TerserPlugin = require('terser-webpack-plugin') | |
const postcss = require('postcss') | |
const postcssPresetEnv = require('postcss-preset-env') | |
const CopyPlugin = require('copy-webpack-plugin') | |
module.exports = { | |
mode: 'development', | |
entry: { | |
myApp_admin: "./src/scss/admin_styles.scss", | |
myApp: [ "./src/index.js" ], | |
}, | |
output: { | |
filename: 'js/[name].js', | |
path: path.resolve(__dirname, 'assets') | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
use: { | |
loader: 'babel-loader', | |
options: { | |
presets: ['@babel/preset-env'], | |
} | |
} | |
}, | |
{ | |
test: /\.s[c|a]ss$/, | |
use: [ | |
MiniCssExtractPlugin.loader, | |
'css-loader', | |
{ | |
loader: 'postcss-loader', | |
options: { | |
ident: 'postcss', | |
plugins: [ | |
require('postcss-preset-env') | |
] | |
} | |
}, | |
'sass-loader' | |
] | |
} | |
] | |
}, | |
plugins: [ | |
new webpack.ProgressPlugin(), | |
new CleanWebpackPlugin(), | |
new MiniCssExtractPlugin({ | |
filename: 'css/[name].css' | |
}), | |
new CopyPlugin([ | |
{ | |
from: 'img/**/*', | |
to: 'img/[name].[ext]', | |
context: 'src/' | |
// dot: true, | |
// toType: 'dir', | |
} | |
]), | |
new BrowserSyncPlugin( | |
// BrowserSync options | |
{ | |
files: '**/*.php', | |
// browse to http://localhost:3000/ during development | |
host: 'localhost', | |
port: 3000, | |
proxy: 'http://yourlocalserver.dev/', | |
}, | |
// plugin options | |
{ | |
// reload: true, | |
// injectCss: true, // doesn't work | |
injectChanges: true | |
} | |
) | |
], | |
optimization: { | |
minimizer: [ | |
new OptimizeCSSAssetsPlugin({ | |
cssProcessorOptions: { | |
discardComments: true, | |
map: { | |
inline: false, | |
annotation: true | |
}, | |
safe: true | |
}, | |
}), | |
new TerserPlugin({ | |
parallel: true, | |
terserOptions: { | |
safari10: true | |
} | |
}) | |
] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment