Skip to content

Instantly share code, notes, and snippets.

@allysonsouza
Created October 2, 2017 15:01
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save allysonsouza/942719e707fc3ef58971695cc893f9bc to your computer and use it in GitHub Desktop.
Save allysonsouza/942719e707fc3ef58971695cc893f9bc to your computer and use it in GitHub Desktop.
WebPack for WordPress Theme
// 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;
@Pushplaybang
Copy link

Pushplaybang commented Jan 23, 2018

try using the following to drop the redundant multiple extract blocks:

  const CSSExtract = new ExtractTextPlugin({
    filename: '[name]',
  });

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:

        {
          test: /\.s?css$/,
          // use: ["style-loader", "css-loader", "sass-loader"]
          use: CSSExtract.extract({
            publicPath: '../',
            use: [
              {
                loader: 'css-loader',
                options: { sourceMap: true },
              },
              {
                loader: 'sass-loader',
                options: { sourceMap: true },
              },
            ],
          }),
        },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment