Skip to content

Instantly share code, notes, and snippets.

@szuc szuc/package.json

Last active Mar 29, 2020
Embed
What would you like to do?
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
You can’t perform that action at this time.