Created
April 15, 2020 19:53
-
-
Save jclusso/42adb0c79cf9ba25e428e2173225f17d to your computer and use it in GitHub Desktop.
Shopify webpack config to work with themekit
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
path = require('path') | |
read = require('read-yaml') | |
MiniCssExtractPlugin = require('mini-css-extract-plugin') | |
UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |
browserSync = require('browser-sync'); | |
BrowserSyncPlugin = require('browser-sync-webpack-plugin') | |
CopyPlugin = require('copy-webpack-plugin') | |
RemovePlugin = require('remove-files-webpack-plugin') | |
devMode = process.env.NODE_ENV == 'development' | |
config = read.sync('config.yml') | |
themekitEnv = if devMode then config.development else config.production | |
themeID = themekitEnv.theme_id | |
storeURL = themekitEnv.store | |
config = [ | |
{ | |
watch: devMode | |
entry: | |
app: './javascripts/app.coffee' | |
critical: './javascripts/critical.coffee' | |
application: './stylesheets/application.scss' | |
home_header: './stylesheets/home_header.scss' | |
about_header: './stylesheets/about_header.scss' | |
product_header: './stylesheets/product_header.scss' | |
deferred: './stylesheets/deferred.scss' | |
module: | |
rules: [ | |
{ | |
test: /\.coffee$/ | |
use: [ 'coffee-loader' ] | |
} | |
{ | |
test: /\.(scss|sass|css)$/ | |
use: [ | |
{ loader: MiniCssExtractPlugin.loader } | |
{ loader: 'css-loader' } | |
{ loader: 'postcss-loader' } | |
{ | |
loader:'sass-loader' | |
options: | |
sassOptions: | |
outputStyle: if devMode then 'expanded' else 'compressed' | |
sourceComments: devMode | |
sourceMap: true | |
} | |
] | |
} | |
{ | |
test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/ | |
use: [ | |
{ | |
loader: 'url-loader?limit=100000' | |
options: | |
name: '[name].[ext]' | |
} | |
] | |
} | |
] | |
output: | |
path: path.resolve(__dirname, 'assets') | |
filename: '[name].js' | |
externals: | |
jquery: 'jQuery' | |
optimization: { | |
minimize: !devMode | |
minimizer: [ | |
new UglifyJsPlugin( | |
test: /\.js$/ | |
parallel: true | |
sourceMap: true | |
) | |
] | |
} | |
plugins: [ | |
new CopyPlugin([ | |
{ from: 'images/*', flatten: true } | |
{ from: 'fonts/*', flatten: true } | |
]) | |
new RemovePlugin({ | |
after: { | |
include: [ | |
'./assets/application.js' | |
'./assets/home_header.js' | |
'./assets/about_header.js' | |
'./assets/product_header.js' | |
'./assets/deferred.js' | |
] | |
} | |
}) | |
new MiniCssExtractPlugin( | |
path: path.resolve(__dirname, 'assets') | |
filename: '[name].css.liquid' | |
) | |
new BrowserSyncPlugin( | |
https: true | |
proxy: 'https://' + storeURL + '?preview_theme_id=' + themeID | |
reloadDelay: 2000 | |
snippetOptions: | |
rule: { | |
match: /<head[^>]*>/i | |
fn: (snippet, match) -> | |
match + snippet | |
} | |
middleware: [ | |
(req, res, next) -> | |
# Shopify sites with redirection enabled for custom domains force redirection | |
# to that domain. `?_fd=0` prevents that forwarding. | |
# ?pb=0 hides the Shopify preview bar | |
prefix = if req.url.indexOf('?') > -1 then '&' else '?' | |
queryStringComponents = [ '_fd=0&pb=0' ] | |
req.url += prefix + queryStringComponents.join('&') | |
next() | |
] | |
files: [ | |
match: [ | |
'**/*.liquid' | |
'assets/application.scss' | |
'assets/home_header.scss' | |
'assets/home_footer.scss' | |
'assets/about_header.scss' | |
'assets/product_header.scss' | |
'assets/application.js' | |
'assets/critical.js' | |
] | |
fn: (event, file) -> | |
if event == 'change' | |
bs = browserSync.get('bs-webpack-plugin') | |
bs.reload() | |
] | |
) | |
] | |
} | |
] | |
module.exports = config |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment