Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@sunnysideup

sunnysideup/test-0-package.json

Last active November 25, 2018 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sunnysideup/c10a74416dcbcb091750a15a7d7ee1ba to your computer and use it in GitHub Desktop.
Save sunnysideup/c10a74416dcbcb091750a15a7d7ee1ba to your computer and use it in GitHub Desktop.
Download ZIP
webpack examples
Raw
test-0-package.json
{
"name": "ss-webpack",
"version": "2.11.2",
"description": "A silverstripe theme setup using webpack to bundle assets and provide a front end build system. ",
"main": "index.js",
"scripts": {
"watch": "NODE_ENV=development webpack-dashboard -- webpack-dev-server",
"dev": "NODE_ENV=development webpack --progress",
"build": "NODE_ENV=production webpack --progress"
},
"author": "Sunny Side Up",
"license": "tba",
"devDependencies": {
"autoprefixer": "^7.2.6",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.24.1",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^4.19.1",
"eslint-loader": "^1.9.0",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.11.2",
"image-webpack-loader": "^4.5.0",
"jquery": "3.3.1",
"moment": "^2.22.1",
"node-sass": "^4.9.3",
"normalize.css": "^7.0.0",
"postcss": "^6.0.22",
"postcss-loader": "^2.1.4",
"postcss-reporter": "^4.0.0",
"postcss-scss": "^1.0.5",
"sass-loader": "^6.0.7",
"style-loader": "^0.18.2",
"stylelint": "^7.13.0",
"svg-inline-loader": "^0.7.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^1.1.2",
"webpack": "^3.11.0",
"webpack-dashboard": "^2.0.0",
"webpack-dev-server": "^2.11.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"exports-loader": "^0.6.4",
"jquery.browser": "^0.1.0",
"script-loader": "^0.7.2"
}
}
Raw
test0-webpack.config.babel.js
/*
Webpack Config!
Original version: Andrew Haine // hello@andrewhaine.co.uk
*/
/*
Imports
*/
import webpack from 'webpack';
import path from 'path';
import DashboardPlugin from 'webpack-dashboard/plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import variables from './../webpack-variables';
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
/*
Useful constants
*/
const SITE_NAME = variables.devWebAddress;
const THEME_NAME = variables.themeName;
const DISTRIBUTION_FOLDER = variables.distributionFolder;
/*
Plugin configuration
*/
//different css points
const extractEditor = new ExtractTextPlugin({
filename: 'editor.css',
});
const extractMain = new ExtractTextPlugin({
filename: 'style.css',
});
//define plugins
let plugins = [];
const IS_PROD = process.env.NODE_ENV === 'production';
if(IS_PROD) {
plugins.push(
new UglifyJSPlugin(),
extractEditor,
extractMain
);
//development
} else {
plugins.push(
//auto updating on dev server
new webpack.HotModuleReplacementPlugin(),
//shows relative path in HotModuleReplacement
new webpack.NamedModulesPlugin(),
//sexy dashboard
new DashboardPlugin(),
extractEditor
);
}
plugins.push(
new webpack.ProvidePlugin(
{
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}
)
);
/**
*
* load files
*/
const sources = [
`../${THEME_NAME}/src`,
`../${THEME_NAME}_app/src`
];
const sassFolders = sources.map((source) => path.resolve(source, "scss"))
.concat(sources.map((source) => path.resolve(source, "sass")));
//HMR can be fixed by using basic loaders instead of textExtract
const sassLoaderExtract = {
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
}
/**
* loads custom scss / sass files
*
*/
const styleLoaders = [{
//basic css
test: /\.css/i,
use: ['style-loader', 'css-loader']
}, {
//main styles
test: /[^editor].\.s(a|c)ss$/i,
include: sassFolders,
use: extractMain.extract(sassLoaderExtract)
}, {
//styles for editor
test: /editor\.s(a|c)ss/i,
include: sassFolders,
use: extractEditor.extract(sassLoaderExtract)
}];
/**
* loads custom javascript files
*
*/
var jsLoaders = [
// KEEP THE CODE BELOW AND TURN ON IF NEEDED....
// {
// //eslint check
// enforce: 'pre',
// test: /\.js$/i,
// exclude: /node_modules/,
// use: {
// loader: 'eslint-loader'
// }
// },
{
//js compilation
test: /\.js$/i,
include: sources.map((source) => path.resolve(source, "src")),
exclude: /node_modules/,
include: [
/node_modules\/uglify-es/
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [require.resolve("babel-preset-es2015")]
}
}
}
];
if(IS_PROD) {
jsLoaders.push(
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
);
}
const imageLoaders = [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 30000
}
},
{
loader: 'image-webpack-loader',
options: {
optipng: {
optimizationLevel: 5
},
mozjpeg: {
interlaced: true,
}
}
}
]
},
{
test: /\.svg$/i,
use: 'svg-inline-loader'
}
];
/*
Main Config Object
*/
export default {
//what files to start from
//bundle should include main.js from all sources
entry: path.resolve(`../${THEME_NAME}_app/src`, "main.js"),
//access from client
output: {
path: path.resolve(`../${DISTRIBUTION_FOLDER}/`, ''),
publicPath: `http://localhost:3000/themes/${DISTRIBUTION_FOLDER}/`,
filename: 'bundle.js'
},
//loaders - css / js / images
module: {
rules: styleLoaders.concat(jsLoaders).concat(imageLoaders)
},
//extra settings
resolve: {
//node modules to include
modules: [
path.join(__dirname, "node_modules"),
path.resolve(`../${THEME_NAME}_node_modules/node_modules`),
path.resolve(`../${THEME_NAME}_app/node_modules/`)
],
//aliases
alias: {
site: path.resolve(`./../../`),
base: path.resolve(`../${THEME_NAME}/src/`),
app: path.resolve(`../${THEME_NAME}_app/src/`),
'jquery': 'jquery/dist/jquery',
'jQuery': 'jquery/dist/jquery'
},
extensions: [".js", ".jsx"]
},
//dev server setup
devServer: {
disableHostCheck: true,
host: '0.0.0.0',
hot: true,
port: 3000,
headers: { 'Access-Control-Allow-Origin': '*' },
publicPath: `http://localhost:3000/resources/themes/${DISTRIBUTION_FOLDER}/`,
// proxy: {
// '/': {
// 'target': {
// 'host': ,
// 'protocol': 'http',
// 'port': 80
// },
// changeOrigin: true,
// secure: false
// }
// },
stats: 'errors-only'
},
//plugins
plugins: plugins
};
Raw
test1-package.json
{
"name": "post",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack-dashboard -- webpack --mode=production",
"build": "webpack --mode=production",
"dev": "webpack --mode=development --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.2.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"postcss-font-magician": "^2.2.1",
"postcss-inline-svg": "^3.1.1",
"postcss-loader": "^2.1.3",
"postcss-reporter": "^6.0.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.4.1",
"webpack-cli": "^3.0.13",
"webpack-dashboard": "^2.0.0",
"webpack-dev-server": "^3.1.5",
"webpack-md5-hash": "0.0.6",
"webpack-notifier": "^1.6.0"
}
}
Raw
test1-webpack.config.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const variables = require('./../webpack-variables.js');
const SITE_NAME = variables.devWebAddress;
const THEME_NAME = variables.themeName;
const DISTRIBUTION_FOLDER = variables.distributionFolder;
const extractEditor = new MiniCssExtractPlugin(
{
filename: 'editor.css'
}
);
const extractMain = new MiniCssExtractPlugin(
{
filename: 'style.css',
}
);
const IS_PROD = process.env.NODE_ENV === 'production';
let myPlugIns = [
new CleanWebpackPlugin('dist', {} ),
new MiniCssExtractPlugin({
filename: 'style.css'
})
];
if(IS_PROD) {
myPlugIns.push(
new UglifyJSPlugin(),
extractEditor,
extractMain
);
//development
} else {
myPlugIns.push(
//auto updating on dev server
new webpack.HotModuleReplacementPlugin(),
//shows relative path in HotModuleReplacement
new webpack.NamedModulesPlugin(),
//sexy dashboard
new DashboardPlugin(),
extractEditor
);
}
myPlugIns.push(
new webpack.ProvidePlugin(
{
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}
)
);
const imageLoaders = [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 30000
}
},
{
loader: 'image-webpack-loader',
options: {
optipng: {
optimizationLevel: 5
},
mozjpeg: {
interlaced: true,
}
}
}
]
},
{
test: /\.svg$/i,
use: 'svg-inline-loader'
}
];
/**
*
* load files
*/
const sources = [
`../${THEME_NAME}/src`,
`../${THEME_NAME}_app/src`
];
const scssFolders = sources.map((source) => path.resolve(source, "scss"));
console.log(scssFolders);
const jsProcessPlan = {
loader: "babel-loader"
}
const cssProcessPlan = [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
];
// webpack v4
module.exports = {
entry: {
main: path.resolve(`../${THEME_NAME}_app/src`, "main.js")
},
output: {
path: path.resolve(`../${DISTRIBUTION_FOLDER}/`, ''),
publicPath: `http://localhost:3000/themes/${DISTRIBUTION_FOLDER}/`,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: jsProcessPlan
},
{
test: /[^editor].\.s(a|c)ss$/i,
use: cssProcessPlan,
include: [
path.resolve('../main_app/src'),
path.resolve('../main_app/src/scss'),
]
},
{
test: /editor\.s(a|c)ss/i,
use: cssProcessPlan,
include: scssFolders
}
]
},
//extra settings
resolve: {
//node modules to include
modules: [
path.join(__dirname, "node_modules"),
path.resolve(`../${THEME_NAME}_node_modules/node_modules`),
path.resolve(`../${THEME_NAME}_app/node_modules/`)
],
//aliases
alias: {
site: path.resolve(`./../../`),
base: path.resolve(`../${THEME_NAME}/src/`),
app: path.resolve(`../${THEME_NAME}_app/src/`),
'jquery': 'jquery/dist/jquery',
'jQuery': 'jquery/dist/jquery'
},
extensions: [".js", ".jsx"]
},
//dev server setup
devServer: {
disableHostCheck: true,
host: '0.0.0.0',
hot: true,
port: 3000,
headers: {
'Access-Control-Allow-Origin': '*'
},
publicPath: `http://localhost:3000/resources/themes/${DISTRIBUTION_FOLDER}/`,
// proxy: {
// '/': {
// 'target': {
// 'host': ,
// 'protocol': 'http',
// 'port': 80
// },
// changeOrigin: true,
// secure: false
// }
// },
stats: 'errors-only'
},
plugins: myPlugIns
};
Raw
test2-package.json
{
"name": "webpack-config",
"version": "1.1.0",
"description": "This is my Webpack 4 configuration for static projects.",
"scripts": {
"watch": "webpack-dashboard -- webpack --progress --hide-modules --mode development",
"dev": "webpack-dev-server --progress --hide-modules --mode development",
"build": "webpack --progress --hide-modules --mode production"
},
"author": {
"name": "Nenad Novaković",
"email": "n.dvlden@gmail.com",
"url": "https://github.com/dvlden"
},
"license": "MIT",
"browserslist": [
"last 1 major version",
"> 1%"
],
"devDependencies": {
"@babel/core": "^7.0.0-rc.1",
"@babel/preset-env": "^7.0.0-rc.1",
"autoprefixer": "^9.1.2",
"babel-loader": "^8.0.0-beta.4",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"cssnano": "^4.0.5",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.3.1",
"jsonminify": "^0.4.1",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-subresource-integrity": "^1.1.0-rc.4",
"webpackbar": "^2.6.3",
"webpack-dashboard": "^2.0.0"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
Raw
test2-webpack.config.js
const path = require('path')
const webpack = require('webpack')
const minJSON = require('jsonminify')
const DashboardPlugin = require('webpack-dashboard/plugin');
const plugins = {
progress: require('webpackbar'),
clean: require('clean-webpack-plugin'),
extractCSS: require('mini-css-extract-plugin'),
// extractText: require('extract-text-webpack-plugin'),
sync: require('browser-sync-webpack-plugin'),
sri: require('webpack-subresource-integrity')
}
module.exports = (env = {}, argv) => {
const isProduction = argv.mode === 'production'
let config = {
context: path.resolve('.'),
entry: {
// vendor: [
// '../main/src/main.js'
// ],
app: [
'../main_app/src/style.scss',
'../main_app/src/main.js'
]
},
output: {
path: path.resolve('../main_dist'),
publicPath: '/resources',
filename: 'bundle.js',
crossOriginLoading: 'anonymous'
},
module: {
rules: [
{
test: /\.((s[ac]|c)ss)$/,
use: [
plugins.extractCSS.loader,
{
loader: 'css-loader',
options: {
sourceMap: ! isProduction
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: ! isProduction,
plugins: (() => {
return isProduction ? [
require('autoprefixer')(),
require('cssnano')({
preset: ['default', {
minifySelectors: false
}]
})
] : []
})()
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: ! isProduction
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
exclude: /fonts/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: '..' // use relative urls
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: ! isProduction,
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false
}
}
}
]
},
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: /images/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../main_dist/fonts/' // use relative urls
}
}]
}
]
},
devServer: {
contentBase: path.join('../main_app', 'src'),
port: 3000,
overlay: {
warnings: true,
errors: true
},
quiet: true,
// open: true
},
plugins: (() => {
let common = [
new plugins.extractCSS({
filename: '[name].css'
}),
new plugins.progress({
color: '#5C95EE'
})
]
const production = [
new plugins.clean(['dist']),
new plugins.sri({
hashFuncNames: ['sha384'],
enabled: true
})
]
const development = [
new plugins.sync(
{
host: 'localhost',
port: 3000,
proxy: 'http://localhost:3000/'
},
{
reload: true
}
),
//auto updating on dev server
new webpack.HotModuleReplacementPlugin(),
//shows relative path in HotModuleReplacement
new webpack.NamedModulesPlugin(),
//sexy dashboard
new DashboardPlugin()
]
return isProduction
? common.concat(production)
: common.concat(development)
})(),
devtool: (() => {
return isProduction
? '' // 'hidden-source-map'
: 'source-map'
})(),
resolve: {
modules: [
'node_modules',
path.resolve('../main_app/node_modules'),
path.resolve('../node_modules'),
path.resolve('../main/node_modules')
],
alias: {
// '~': path.resolve(__dirname, 'src/scripts/'),
site: path.resolve(`./../../`),
base: path.resolve(`../main/src/`),
app: path.resolve(`../main_app/src/`),
'jquery': 'jquery/dist/jquery',
'jQuery': 'jquery/dist/jquery'
}
}
}
return config
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment