Created
October 2, 2017 15:01
-
-
Save allysonsouza/942719e707fc3ef58971695cc893f9bc to your computer and use it in GitHub Desktop.
WebPack for WordPress Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Const | |
const webpack = require('webpack'); //to access built-in plugins | |
const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
const path = require('path'); | |
// ExtractPlugin - Multiple instances | |
// Configure individual stylesheet generation to use correctly with wp_enqueue_style | |
const extractMain = new ExtractTextPlugin('css/main.min.css'); | |
const extractAdmin = new ExtractTextPlugin('css/admin.min.css'); | |
const extractEditor = new ExtractTextPlugin('css/editor.min.css'); | |
const config = { | |
entry: { | |
main: [ | |
'./src/js/main.js', | |
'./src/scss/main.scss', | |
'./src/scss/admin-style.scss', | |
'./src/scss/editor-style.scss', | |
] | |
}, | |
// Output js in /js subfolder | |
output: { | |
filename: 'js/[name].min.js', | |
path: path.resolve(__dirname, 'dist') | |
}, | |
resolve: { | |
extensions: ['.js'] | |
}, | |
// Configure the rules to generate files | |
// TO-DO: check for a better solution to match filenames to call the | |
// correct extract{NAME} instance | |
module: { | |
rules: [{ | |
// Generates main.min.css | |
test: /\main.(scss)$/, | |
use: extractMain.extract({ fallback: 'style-loader', use: [ | |
{ | |
loader: 'css-loader', | |
options: { | |
sourceMap: true, | |
url: false | |
} | |
}, | |
{ loader: 'postcss-loader', options: { sourceMap: true } }, | |
{ loader: 'sass-loader', options: { sourceMap: true } } | |
]}), | |
exclude: /node_modules/ | |
}, | |
{ | |
// Generates admin.min.css | |
test: /\admin-style.(scss)$/, | |
use: extractAdmin.extract({ fallback: 'style-loader', use: [ | |
{ | |
loader: 'css-loader', | |
options: { | |
sourceMap: true, | |
url: false | |
} | |
}, | |
{ loader: 'postcss-loader', options: { sourceMap: true } }, | |
{ loader: 'sass-loader', options: { sourceMap: true } } | |
]}), | |
exclude: /node_modules/ | |
}, | |
{ | |
// Generates editor.min.css | |
test: /\editor-style.(scss)$/, | |
use: extractEditor.extract({ fallback: 'style-loader', use: [ | |
{ | |
loader: 'css-loader', | |
options: { | |
sourceMap: true, | |
url: false | |
} | |
}, | |
{ loader: 'postcss-loader', options: { sourceMap: true } }, | |
{ loader: 'sass-loader', options: { sourceMap: true } } | |
]}), | |
exclude: /node_modules/ | |
}, | |
{ | |
test: /\.css$/, | |
use: ExtractTextPlugin.extract([ | |
{ | |
loader: "css-loader", | |
options: { | |
sourceMap: true, | |
url: false, | |
alias: { | |
"../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap" | |
} | |
} | |
} | |
]), | |
}, | |
{ | |
// URL Loader - used if url are set to true in css-loader | |
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, | |
loader: 'url-loader', | |
options: { | |
limit: 10000 | |
} | |
}, | |
{ test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ }, | |
] | |
}, | |
// PLugins used by WebPack | |
plugins: [ | |
new webpack.optimize.UglifyJsPlugin( { sourceMap: true } ), | |
extractMain, | |
extractAdmin, | |
extractEditor, | |
new webpack.ProvidePlugin({ | |
$: 'jquery', | |
jQuery: 'jquery', | |
'window.jQuery': 'jquery', | |
Popper: ['popper.js', 'default'], | |
// In case you imported plugins individually, you must also require them here, example: | |
// Util: "exports-loader?Util!bootstrap/js/dist/util", | |
}) | |
] | |
}; | |
module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
try using the following to drop the redundant multiple extract blocks:
with that, one instance should handle your different files declared in entry.
You're also going to have a bad time if you don't set public path in output, OR set it in the extract-text module rules, try something like: