Skip to content

Instantly share code, notes, and snippets.

@mikhaelr

mikhaelr/entry.js

Last active November 2, 2018 10:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikhaelr/45492e763445c9a0daa5554c7db049c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikhaelr/45492e763445c9a0daa5554c7db049c7 to your computer and use it in GitHub Desktop.
Download ZIP
Webpack config
Raw
entry.js
// Import style
require('./../scss/main.scss')
// Create SVG sprite
require.context('./../svg/sprite-optimized?optimized', true, /\.svg$/)
// Create SVG sprite
require.context('./../svg/sprite-non-optimized?non-optimized', true, /\.svg$/)
// Images
require.context('./../img', true)
Raw
webpack.config.js
const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin")
const WebpackMonitor = require("webpack-monitor")
const ImageminPlugin = require('imagemin-webpack-plugin').default
module.exports = function (env, argv) {
const devMode = argv.mode !== "production"
return {
entry: {
"main": "./assets-src/js/main.js",
"polyfills": "./assets-src/js/polyfills.js",
//"editor-style": "./assets-src/scss/editor-style.scss",
},
output: {
path: path.resolve(__dirname, "assets"),
filename: "[name].js"
},
resolve: {
alias: {
"assets": path.resolve(__dirname, "assets"),
"TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
"TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
"TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
"TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
"ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
"animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
"debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
},
extensions: [".ts", ".js", ".json"]
},
optimization: {
minimizer: [
!devMode ? new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}) : null,
!devMode ? new OptimizeCSSAssetsPlugin({}) : null,
].filter(Boolean)
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "[name].css",
}),
new SpriteLoaderPlugin(),
devMode ? new BrowserSyncPlugin({
logSnippet: false,
ghostMode: false,
notify: false,
open: false,
files: [
"**/*.php"
],
reloadDelay: 0
}) : null,
devMode ? new WebpackMonitor({
capture: true,
port: 8081,
excludeSourceMaps: true
}) : null,
!devMode ? new ImageminPlugin({
maxFileSize: 1000 * 400, // Only apply this one to files equal to or under 10kb
svgo: null
}) : null,
!devMode ? new ImageminPlugin({
minFileSize: 1000 * 400, // Only apply this one to files over 1kb
jpegtran: { progressive: false },
optipng: 7, // 0 à 7,
pngquant: {quality: "60-90"},
svgo: null
}) : null,
].filter(Boolean),
module: {
rules: [
// Javascript
{
test: /\.(js)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
//"@babel/typescript"
],
plugins: [
"@babel/plugin-transform-runtime",
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
],
cacheDirectory: true
}
}
},
// styles
{
test: /\.scss$/,
//include: path.resolve(__dirname, "assets-src/scss/main.scss"),
use: [
//devMode ? "style-loader" : MiniCssExtractPlugin.loader,
MiniCssExtractPlugin.loader,
{ loader: "css-loader", options: { url: devMode ? true : false } },
"sass-loader",
"postcss-loader",
],
},
// SVG sprite -> Opti
{
test: /\.svg$/,
resourceQuery: /optimized/,
include: [ path.resolve(__dirname, "assets-src/svg/sprite-optimized") ],
use: [
{
loader: "svg-sprite-loader",
options: {
extract: true,
spriteFilename: 'optimized.svg'
}
},
{
loader: "svgo-loader",
options: {
plugins: [
{ removeAttrs: { attrs: "*:(fill|stroke)" } },
{ cleanupIDs: false },
{ removeTitle: true },
{ removeDesc: true },
{ convertColors: { shorthex: false } },
{ convertPathData: false },
{ removeDoctype: true },
{ removeComments: true },
{ removeUselessDefs: false },
{ removeEmptyAttrs: true },
{ removeViewBox: false },
{ convertShapeToPath: false }
]
}
}
],
},
// SVG sprite -> Non-opti
{
test: /\.svg$/,
resourceQuery: /non-optimized/,
include: [ path.resolve(__dirname, "assets-src/svg/sprite-non-optimized") ],
use: [
{
loader: "svg-sprite-loader",
options: {
extract: true,
spriteFilename: 'non-optimized.svg'
}
},
],
},
// Images
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
publicPath: "assets/img",
name: "[name].[ext]",
outputPath: "img/",
context: ""
}
}
],
},
// Fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
exclude: [
path.resolve(__dirname, "assets-src/fonts/sprite-optimized")
],
use: [
{
loader: "file-loader",
options: {
publicPath: "assets/fonts",
name: "[name].[ext]",
outputPath: "fonts/",
context: ""
}
}
],
},
// Videos
{
test: /\.(mp4)$/,
use: [
{
loader: "file-loader",
options: {
publicPath: "assets/videos",
name: "[name].[ext]",
outputPath: "videos/",
context: ""
}
}
],
}
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment