Commit b11a5818 authored by Evaryont's avatar Evaryont

webpack and middleman integration

parent 2af5239a
......@@ -12,6 +12,8 @@ rules:
- error
- anonymous: "always"
named: "never"
globals: # match this with webpack define/provide plugins
__PRODUCTION: false
# plugins:
# - foo
......@@ -78,6 +78,7 @@ desc "Build the middleman site"
task :build do
cd File.expand_path('..', __FILE__)
sh "bundle exec middleman build --clean --verbose --environment=production"
cp '.tmp/dist/stats.json', 'build/assets/'
end
desc "Run the middleman preview server"
......
......@@ -53,7 +53,7 @@ activate :automatic_image_sizes
activate :livereload
set :css_dir, 'assets/stylesheets'
set :js_dir, 'assets/javascripts'
set :js_dir, 'assets/javascript'
set :images_dir, 'assets/images'
# Enable cache buster
......@@ -82,10 +82,10 @@ activate :external_pipeline,
source: ".tmp/dist",
latency: 1
## Build-specific configuration
#configure :build do
# if ENV['TARGET'] # Building when we are deploying...
# activate :minify_css
# activate :minify_javascript
# end
#end
# Ignore everything in javascript or CSS -land, letting WebPack take over entirely
webpack_artifacts = ['index.js', 'index.js.map', 'stats.json', 'styles.css', 'styles.css.map']
configure :build do
ignore { |path| path =~ /^assets\/(stylesheets|javascript)\// && !webpack_artifacts.include?(File.basename(path)) }
end
activate :gzip
import './ani-text.js';
function log() {
if (!__PRODUCTION) {
console.log(...arguments);
}
}
log('Only going to show in the development local server!');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;;
const SriPlugin = require('webpack-subresource-integrity');
const webpack = require('webpack');
const Clean = require('clean-webpack-plugin');
module.exports = {
entry: {
main: "./source/assets/javascript/index.js",
styles: "./source/assets/stylesheets/all.css.scss",
},
output: {
"path": __dirname+'/build/assets/',
"filename": "[name].js",
"crossOriginLoading": "anonymous"
},
devtool: "source-map",
module: {
rules: [
{
"enforce": "pre",
"test": /\.(js|jsx)$/,
"exclude": /node_modules\//,
"use": "eslint-loader"
},
{
"test": /\.js$/,
"exclude": /node_modules\//,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"@babel/env"
]
module.exports = (env, options) => {
const isProduction = options.mode === 'production';
return {
entry: {
index: "./source/assets/javascript/index.js",
styles: "./source/assets/stylesheets/all.css.scss",
},
output: {
"path": __dirname + '/.tmp/dist/',
"filename": "assets/javascript/[name].js",
"crossOriginLoading": "anonymous"
},
devtool: "source-map",
module: {
rules: [
{
"enforce": "pre",
"test": /\.(js|jsx)$/,
"exclude": /node_modules\//,
"use": "eslint-loader"
},
{
"test": /\.js$/,
"exclude": /node_modules\//,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"@babel/env"
]
}
}
},
{
"test": /\.s?css$/,
"use": [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
},
{
"test": /\.s?css$/,
"use": [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({filename: "[name].css"}),
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: true, // process.env.NODE_ENV === 'production',
}),
new StatsWriterPlugin({
filename: 'stats.json',
fields: null,
transform: (data, comp) => {
stats = comp.compiler.getStats()
var output = {
concerns: {
warnings: stats.hasWarnings(),
errors: stats.hasErrors()
}
};
output.assetsByChunkName = data.assetsByChunkName;
]
},
plugins: [
new Clean(['.tmp']),
new MiniCssExtractPlugin({filename: "assets/stylesheets/[name].css"}),
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: isProduction,
}),
new webpack.DefinePlugin({
__PRODUCTION: isProduction
}),
new StatsWriterPlugin({
filename: 'stats.json',
fields: null,
transform: (data, comp) => {
stats = comp.compiler.getStats()
var output = {
concerns: {
warnings: stats.hasWarnings(),
errors: stats.hasErrors()
},
crossOriginLoading: comp.compiler.outputOptions.crossOriginLoading
};
output.assetsByChunkName = data.assetsByChunkName;
output.integrity = {}
for (let chunk of Object.keys(output.assetsByChunkName)) {
integrity_list = {}
for (let asset_name of output.assetsByChunkName[chunk]) {
integrity_list[asset_name] = stats.compilation.assets[asset_name].integrity;
output.integrity = {}
for (let chunk of Object.keys(output.assetsByChunkName)) {
integrity_list = {}
for (let asset_name of output.assetsByChunkName[chunk]) {
integrity_list[asset_name] = stats.compilation.assets[asset_name] && stats.compilation.assets[asset_name].integrity;
}
output.integrity[chunk] = integrity_list
}
output.integrity[chunk] = integrity_list
}
return JSON.stringify(output, null, 4);
}
})
]
return JSON.stringify(output, null, 4);
}
})
]
}
}
......@@ -1303,6 +1303,13 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
clean-webpack-plugin@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-1.0.0.tgz#f184b9c26d12983d639828e0548ae2080e84b6a7"
integrity sha512-+f96f52UIET4tOFBbCqezx7KH+w7lz/p4fA1FEjf0hC6ugxqwZedBtENzekN2FnmoTF/bn1LrlkvebOsDZuXKw==
dependencies:
rimraf "^2.6.1"
cli-cursor@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment