Skip to content

Instantly share code, notes, and snippets.

@joshRpowell
Forked from javierarques/config.rb
Created December 4, 2017 15:15
Show Gist options
  • Save joshRpowell/213ad4b222c8ee34dd046aee5d05c208 to your computer and use it in GitHub Desktop.
Save joshRpowell/213ad4b222c8ee34dd046aee5d05c208 to your computer and use it in GitHub Desktop.
Middleman 4 and Webpack 3 integration. Use Middleman with External Pipeline.
# ...
activate :external_pipeline,
name: :webpack,
command: build? ? "npm run build:assets" : "npm run start:assets",
source: ".tmp/webpack_output",
latency: 1
# ...
// ...
"scripts": {
"test": "mocha --require test/helpers/dom.js --compilers js:babel-core/register",
"build:assets": "NODE_ENV=production webpack -p --config webpack.prod.config.js",
"build": "bundle exec middleman build",
"start:assets": "NODE_ENV=development webpack --watch --config webpack.dev.config.js",
"start": "bundle exec middleman server"
},
"babel": {
"presets": [
"es2015"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^3.0.0",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"sass-loader": "^6.0.6",
"sinon": "^3.2.1",
"style-loader": "^0.18.2",
"webpack": "^3.5.5"
}
// ...
const path = require('path');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: {
all: path.join(__dirname, '/source/javascripts/index.js')
},
output: {
path: path.join(__dirname, '.tmp/webpack_output'),
filename: 'javascripts/[name].js'
},
resolve: {
modules: [
path.join(__dirname, 'source'),
'node_modules'
]
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: 'style-loader', options: { sourceMap: true } },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: ['babel-loader']
}
]
}
};
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: {
all: path.join(__dirname, '/source/javascripts/index.js')
},
output: {
path: path.join(__dirname, '.tmp/webpack_output'),
filename: 'javascripts/[name].js'
},
resolve: {
modules: [
path.join(__dirname, 'source'),
'node_modules'
]
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
query: {
modules: false,
sourceMaps: true
}
}, {
loader: 'postcss-loader',
query: {
sourceMaps: true
}
}, {
loader: 'sass-loader',
query: {
sourceMaps: true
}
}
]
})
}
]
},
plugins: [
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
new ExtractTextPlugin({ filename: 'css/app.css' })
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment