Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drupal 8 theme development with Webpack, SASS, ES6 and BrowserSync serving
{
"presets": ["es2015"],
"plugins": ["transform-async-to-generator"]
}
{
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 8
},
"env": {
"es6": true,
"node": true,
"browser": true
},
"rules": {
"object-curly-spacing": [2, "always"],
"quotes": [
2,
"single",
{
"allowTemplateLiterals": true
}
]
}
}
{
"name": "",
"version": "",
"description": "",
"author": "",
"license": "ISC",
"main": "resources/scripts/main.js",
"scripts": {
"build": "NODE_ENV=production webpack -p",
"start": "NODE_ENV=development webpack --progress --colors --watch"
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.18.13",
"browser-sync-webpack-plugin": "^1.2.0",
"css-mqpacker": "^6.0.1",
"postcss-pxtorem": "^4.0.1",
"webpack": "^3.5.6",
"webpack-blocks": "^1.0.0-beta.4"
},
"dependencies": {}
}
const autoprefixer = require('autoprefixer');
const postcssPxtorem = require('postcss-pxtorem');
const cssMqpacker = require('css-mqpacker');
module.exports = {
plugins: [
autoprefixer({
grid: true,
browsers: ['last 2 versions', 'ie >= 10', 'Safari >= 10']
}),
postcssPxtorem({
propList: ['*', '!border*'],
mediaQuery: true
}),
cssMqpacker()
]
};
const {
createConfig,
match,
resolve,
// Shorthand setters
addPlugins,
defineConstants,
entryPoint,
env,
setOutput,
sourceMaps
} = require('@webpack-blocks/webpack');
const webpack = require('webpack');
const devServer = require('@webpack-blocks/dev-server');
const { file, url } = require('@webpack-blocks/assets');
const babel = require('@webpack-blocks/babel6');
const sass = require('@webpack-blocks/sass');
const postcss = require('@webpack-blocks/postcss');
const extractText = require('@webpack-blocks/extract-text');
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = createConfig([
defineConstants({ 'process.env.NODE_ENV': process.env.NODE_ENV || 'development' }),
entryPoint({
main: './resources/scripts/main.js',
// CKEditor Styles
editor: './resources/styles/editor.scss'
}),
setOutput({
path: path.resolve('./build'),
filename: 'scripts/[name].js'
}),
// use Drupal's jQuery
setExternals('jQuery'),
babel(),
match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [file()]),
addPlugins([
new webpack.ProvidePlugin({
$: 'jQuery',
jquery: 'jQuery'
})
]),
env('production', [
stylesBlock()
]),
env('development', [
sourceMaps(),
stylesBlock(true),
addPlugins([
new BrowserSyncPlugin(
{
notify: false,
port: 8080,
proxy: 'testingurl.dev',
files: [
'*.theme',
'components/**/*.twig',
'templates/**/*.twig'
]
}
)
])
])
]);
function stylesBlock(dev = false) {
const sassConfig = {
outputStyle: 'expanded',
precision: 4,
includePaths: ['node_modules']
};
if (dev) {
sassConfig.sourceMap = true;
sassConfig.sourceMapEmbed = true;
}
return match('*.scss', { exclude: path.resolve('node_modules') }, [
postcss(),
sass(sassConfig),
extractText('styles/[name].css')
]);
}
function setExternals(externals) {
return function (context, { merge }) {
return merge({ externals });
};
}
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.