Skip to content

Upgraded the tutorial code to Webpack4. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dharapvj wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Upgraded the tutorial code to Webpack4. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15,911 changes: 15,911 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

127 changes: 62 additions & 65 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
{
"name": "webpack2-demo",
"version": "1.0.0",
"description": "Demonstrations of Webpack2",
"private": true,
"scripts": {
"server": "nodemon --watch server server/server.js",

"s1": "webpack --config=step-01-with-webpack/webpack.config.js --watch --progress",
"s1:prod": "webpack -p --config=step-01-with-webpack/webpack.config.js",

"s2": "webpack --config=step-02-loaders/webpack.config.js --watch --progress",
"s2:prod": "webpack -p --config=step-02-loaders/webpack.config.js",

"s3": "webpack-dev-server --config=step-03-dev-server/webpack.config.js --inline --watch --progress",

"s4": "webpack-dev-server --config=step-04-plugins/webpack.config.js --inline --watch --progress",
"s4:prod": "cross-env NODE_ENV=production webpack-dev-server --config=step-04-plugins/webpack.config.js --inline --watch --progress",

"s5": "webpack --config=step-05-code-splitting/webpack.config.js --watch --progress",
"s5:prod": "webpack -p --config=step-05-code-splitting/webpack.config.js",

"clean:s1": "rimraf step-01-with-webpack/dist",
"clean:s2": "rimraf step-02-loaders/dist",
"clean:s4:dll": "rimraf step-04-plugins/dll",
"clean:s5": "rimraf step-05-code-splitting/dist"
},
"author": "Vijay Dharap (@dharapvj)",
"license": "MIT",
"devDependencies": {
"add-asset-html-webpack-plugin": "^1.0.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "^6.22.0",
"chalk": "^1.1.3",
"chance": "^1.0.4",
"cross-env": "^3.2.3",
"css-loader": "^0.26.1",
"eslint": "^3.14.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"json-server": "^0.9.4",
"morgan": "^1.7.0",
"node-sass": "^4.5.0",
"nodemon": "^1.11.0",
"normalize.css": "^5.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.2",
"style-loader": "^0.13.1",
"ts-loader": "^2.0.0",
"typescript": "^2.1.5",
"url-loader": "^0.5.7",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-merge": "^4.0.0"
},
"dependencies": {
"jquery": "^3.1.1",
"lodash.pick": "^4.4.0",
"rangeslider.js": "^2.3.0"
}
"name": "webpack4-demo",
"version": "1.0.0",
"description": "Demonstrations of Webpack4",
"private": true,
"scripts": {
"server": "nodemon --watch server server/server.js",
"s1": "webpack --mode=development --config=step-01-with-webpack/webpack.config.js --watch --progress",
"s1:prod": "webpack --mode=production --config=step-01-with-webpack/webpack.config.js",
"s2": "webpack --mode=development --config=step-02-loaders/webpack.config.js --watch --progress",
"s2:prod": "webpack --mode=production --config=step-02-loaders/webpack.config.js",
"s3": "webpack-dev-server --mode=development --config=step-03-dev-server/webpack.config.js --inline --watch --progress",
"s3:prod": "webpack-dev-server --mode=production --config=step-03-dev-server/webpack.config.js --inline --watch --progress",
"s4": "webpack-dev-server --mode=development --config=step-04-plugins/webpack.config.js --inline --watch --progress",
"s4:prod": "cross-env NODE_ENV=production webpack-dev-server --mode=production --config=step-04-plugins/webpack.config.js --inline --watch --progress",
"s5": "webpack --mode=development --config=step-05-code-splitting/webpack.config.js --watch --progress",
"s5:prod": "webpack --mode=production --config=step-05-code-splitting/webpack.config.js",
"clean:s1": "rimraf step-01-with-webpack/dist",
"clean:s2": "rimraf step-02-loaders/dist",
"clean:s4:dll": "rimraf step-04-plugins/dll",
"clean:s5": "rimraf step-05-code-splitting/dist"
},
"author": "Vijay Dharap (@dharapvj)",
"license": "MIT",
"devDependencies": {
"@webpack-cli/migrate": "^0.1.2",
"add-asset-html-webpack-plugin": "^3",
"babel-core": "^6",
"babel-eslint": "^10",
"babel-loader": "^7",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "^6.22.0",
"chalk": "^2.4.1",
"chance": "^1.0.4",
"cross-env": "^5.2.0",
"css-loader": "^1",
"eslint": "^5.6.1",
"file-loader": "^2",
"html-loader": "^0.5",
"html-webpack-plugin": "^3",
"json-server": "^0.14.0",
"morgan": "^1.7.0",
"node-sass": "^4.5.0",
"nodemon": "^1.11.0",
"normalize.css": "^8.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^7",
"style-loader": "^0.23",
"ts-loader": "^5",
"typescript": "^3.1.1",
"url-loader": "^1.1.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-merge": "^4.0.0"
"mini-css-extract-plugin": "^0.4.3",
},
"dependencies": {
"jquery": "^3.1.1",
"lodash.pick": "^4.4.0",
"rangeslider.js": "^2.3.0"
}
}
19 changes: 9 additions & 10 deletions step-02-loaders/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,13 @@ bake();
/*
Showcase 4 - SCSS Loading (and bundling inside bundle.JS)
*/
/*import './assets/scss/_container.scss';
import './assets/scss/_container.scss';
loadHTML('sass');
*/

/*
Showcase 5 - JSON Loading (and bundling inside bundle.JS)
*/
/*loadHTML('json');
loadHTML('json');

import db from './assets/data/db.json';
let addFrnds = (frnds) => {
Expand All @@ -73,25 +73,24 @@ let addFrnds = (frnds) => {
});
}
addFrnds(db.friends);
*/

/*
Showcase 6 - Font Loading (but NOT bundling inside bundle.JS)
*/
/*import './assets/scss/_fonts.scss';
import './assets/scss/_fonts.scss';
import './assets/scss/font-demo.scss';
loadHTML('font');
*/


/*
Showcase 7 - Typescript loading (and bundling inside bundle.js)
*/
/*import { FriendComponent } from './ts/dummy.ts';
import { FriendComponent } from './ts/dummy.ts';
let frndC = new FriendComponent();
addFrnds(frndC.getFriends());
*/

/*
Showcase 8 - image loading via file-loader.
*/
// Load HTML fragment for this demo.
/*loadHTML('img');
*/
loadHTML('img');
4 changes: 2 additions & 2 deletions step-02-loaders/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
<body>
<div class="box jsload"></div>
<div class="box cssload"></div>
<!--<div class="box sassload"></div>
<div class="box sassload"></div>
<div class="box jsonload"></div>
<div class="box fontload"></div>
<div class="box imgload"></div>-->
<div class="box imgload"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
8 changes: 4 additions & 4 deletions step-02-loaders/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ module.exports = {
}
},
/* UNCOMMENT BELOW PORTION TO SEE ALL LOADERS WORKING */
/* {
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
Expand All @@ -57,10 +57,10 @@ module.exports = {
}
]
},
{
/* {
test: /\.json$/,
use: 'json-loader'
},
}, */
{
test: /\.scss$/,
use: [
Expand Down Expand Up @@ -92,7 +92,7 @@ module.exports = {
publicPath:'dist/'
}
}
}*/
}
]
},
stats: "verbose"
Expand Down
1 change: 0 additions & 1 deletion step-04-plugins/webpack/webpack.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev

const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');

const METADATA = {
Expand Down
2 changes: 1 addition & 1 deletion step-05-code-splitting/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as $ from 'jquery';
import $ from 'jquery';
import './app.css';

// let $ = require('jquery');
Expand Down
37 changes: 26 additions & 11 deletions step-05-code-splitting/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: {
Expand All @@ -19,6 +18,19 @@ module.exports = {
// Also currently cheap-module-eval-source-map has issues in chrome
devtool: 'cheap-module-source-map',
// devtool: 'eval-source-map',
optimization: {
splitChunks: {
// include all types of chunks
minSize: 30000,
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
// IMPORTANT: As of Mar 2017, babel-loader is REQUIRED for "dynamic import()" statements to work
// with below configuration of preset and plugin
module: {
Expand All @@ -39,9 +51,12 @@ module.exports = {
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader'
})
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader"
]
}
]
},
Expand All @@ -50,12 +65,12 @@ module.exports = {
chunksSortMode: 'dependency',
inject: 'body'
}),
new CommonsChunkPlugin({
name: 'vendor',
}),
// Usually, you would want to enable this only in PROD environment.
// HtmlWebpackPlugin is intelligent and adds the <link> for styles.css in index.html automatically.
new ExtractTextPlugin('styles.css'),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}

Expand Down