diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md index 97f19d35d9d4..c85dcb6ae3fb 100644 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.md @@ -121,7 +121,7 @@ __src/index.js__ + import './style.css'; function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -217,14 +217,14 @@ __src/index.js__ + import Icon from './icon.png'; function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); + // Add the image to our existing div. -+ var myIcon = new Image(); ++ let myIcon = new Image(); + myIcon.src = Icon; + + element.appendChild(myIcon); @@ -463,14 +463,14 @@ __src/index.js__ + import Data from './data.xml'; function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // Add the image to our existing div. - var myIcon = new Image(); + let myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); @@ -588,14 +588,14 @@ __src/index.js__ - import Data from './data.xml'; - function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); - - // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); - element.classList.add('hello'); - - // Add the image to our existing div. -- var myIcon = new Image(); +- let myIcon = new Image(); - myIcon.src = Icon; - - element.appendChild(myIcon); diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md index 81189d3695b3..b4f0cf9a8816 100644 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.md @@ -51,7 +51,8 @@ __webpack.config.js__ module.exports = { entry: './src/index.js', plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ -       title: 'Output Management' +       title: 'Caching' @@ -103,7 +104,8 @@ __webpack.config.js__ module.exports = { entry: './src/index.js', plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({       title: 'Caching' }) @@ -147,7 +149,8 @@ __webpack.config.js__ module.exports = { entry: './src/index.js', plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({       title: 'Caching' }), @@ -218,7 +221,7 @@ __src/index.js__ + import Print from './print'; function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -261,7 +264,8 @@ __webpack.config.js__ module.exports = { entry: './src/index.js', plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Caching' }), @@ -309,7 +313,7 @@ __src/index.js__ + // import Print from './print'; function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.md index 5ff5f3d0ecbe..a0ad87949896 100644 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.md @@ -217,12 +217,12 @@ __src/index.js__ - - function component() { + function getComponent() { -- var element = document.createElement('div'); +- let element = document.createElement('div'); - - // Lodash, now imported by this script - element.innerHTML = _.join(['Hello', 'webpack'], ' '); + return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => { -+ var element = document.createElement('div'); ++ let element = document.createElement('div'); + + element.innerHTML = _.join(['Hello', 'webpack'], ' '); + @@ -258,14 +258,14 @@ __src/index.js__ - function getComponent() { + async function getComponent() { - return import(/* webpackChunkName: "lodash" */ 'lodash').then({ default: _ } => { -- var element = document.createElement('div'); +- let element = document.createElement('div'); - - element.innerHTML = _.join(['Hello', 'webpack'], ' '); - - return element; - - }).catch(error => 'An error occurred while loading the component'); -+ var element = document.createElement('div'); ++ let element = document.createElement('div'); + const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash'); + + element.innerHTML = _.join(['Hello', 'webpack'], ' '); diff --git a/src/content/guides/development.md b/src/content/guides/development.md index 4bf225ed61f1..d6b1676ca20e 100644 --- a/src/content/guides/development.md +++ b/src/content/guides/development.md @@ -36,9 +36,11 @@ __webpack.config.js__ print: './src/print.js' }, plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ - title: 'Development' +- title: 'Output Management' ++ title: 'Development' }) ], output: { @@ -214,7 +216,8 @@ __webpack.config.js__ + contentBase: './dist' + }, plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Development' }) @@ -236,29 +239,14 @@ __package.json__ ``` diff { - "name": "development", - "version": "1.0.0", - "description": "", - "main": "webpack.config.js", + ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", + "start": "webpack-dev-server --open", "build": "webpack" }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "clean-webpack-plugin": "^0.1.16", - "css-loader": "^0.28.4", - "csv-loader": "^2.1.1", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.29.0", - "style-loader": "^0.18.2", - "webpack": "^3.0.0", - "xml-loader": "^1.2.1" - } + ... } ``` @@ -301,7 +289,7 @@ __webpack.config.js__ plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ - title: 'Output Management' + title: 'Development' }) ], output: { @@ -357,10 +345,7 @@ __package.json__ ``` diff { - "name": "development", - "version": "1.0.0", - "description": "", - "main": "webpack.config.js", + ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", @@ -368,21 +353,7 @@ __package.json__ + "server": "node server.js", "build": "webpack" }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "clean-webpack-plugin": "^0.1.16", - "css-loader": "^0.28.4", - "csv-loader": "^2.1.1", - "express": "^4.15.3", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.29.0", - "style-loader": "^0.18.2", - "webpack": "^3.0.0", - "webpack-dev-middleware": "^1.12.0", - "xml-loader": "^1.2.1" - } + ... } ``` diff --git a/src/content/guides/hot-module-replacement.md b/src/content/guides/hot-module-replacement.md index db1f91602f11..9eb3b0b8047a 100644 --- a/src/content/guides/hot-module-replacement.md +++ b/src/content/guides/hot-module-replacement.md @@ -57,9 +57,11 @@ __webpack.config.js__ + hot: true }, plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ - title: 'Hot Module Replacement' +- title: 'Development' ++ title: 'Hot Module Replacement' }), + new webpack.HotModuleReplacementPlugin() ], @@ -81,8 +83,8 @@ __index.js__ import printMe from './print.js'; function component() { - var element = document.createElement('div'); - var btn = document.createElement('button'); + let element = document.createElement('div'); + let btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -178,8 +180,8 @@ __index.js__ import printMe from './print.js'; function component() { - var element = document.createElement('div'); - var btn = document.createElement('button'); + let element = document.createElement('div'); + let btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -247,7 +249,8 @@ __webpack.config.js__ + ] + }, plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Hot Module Replacement' }), @@ -292,8 +295,8 @@ __index.js__ + import './styles.css'; function component() { - var element = document.createElement('div'); - var btn = document.createElement('button'); + let element = document.createElement('div'); + let btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); diff --git a/src/content/guides/lazy-loading.md b/src/content/guides/lazy-loading.md index e043a3f6ce16..05d14b8a1a75 100644 --- a/src/content/guides/lazy-loading.md +++ b/src/content/guides/lazy-loading.md @@ -53,10 +53,10 @@ __src/index.js__ + - async function getComponent() { + function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); - const _ = await import(/* webpackChunkName: "lodash" */ 'lodash'); -+ var button = document.createElement('button'); -+ var br = document.createElement('br'); ++ let button = document.createElement('button'); ++ let br = document.createElement('br'); + button.innerHTML = 'Click me and look at the console!'; element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -66,7 +66,7 @@ __src/index.js__ + // Note that because a network request is involved, some indication + // of loading would need to be shown in a production-level site/app. + button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => { -+ var print = module.default; ++ let print = module.default; + + print(); + }); diff --git a/src/content/guides/output-management.md b/src/content/guides/output-management.md index 12269c9d03ef..7ad298212094 100644 --- a/src/content/guides/output-management.md +++ b/src/content/guides/output-management.md @@ -49,8 +49,8 @@ __src/index.js__ + import printMe from './print.js'; function component() { - var element = document.createElement('div'); -+ var btn = document.createElement('button'); + let element = document.createElement('div'); ++ let btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); diff --git a/src/content/guides/production.md b/src/content/guides/production.md index 493fc7c06333..c5e2e299e41d 100644 --- a/src/content/guides/production.md +++ b/src/content/guides/production.md @@ -64,7 +64,8 @@ __webpack.common.js__ + app: './src/index.js' + }, + plugins: [ -+ new CleanWebpackPlugin(['dist']), ++ // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin ++ new CleanWebpackPlugin(), + new HtmlWebpackPlugin({ + title: 'Production' + }) @@ -115,33 +116,14 @@ __package.json__ ``` diff { - "name": "development", - "version": "1.0.0", - "description": "", - "main": "src/index.js", + ... "scripts": { - "start": "webpack-dev-server --open", + "start": "webpack-dev-server --open --config webpack.dev.js", - "build": "webpack" + "build": "webpack --config webpack.prod.js" }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "clean-webpack-plugin": "^0.1.17", - "css-loader": "^0.28.4", - "csv-loader": "^2.1.1", - "express": "^4.15.3", - "file-loader": "^0.11.2", - "html-webpack-plugin": "^2.29.0", - "style-loader": "^0.18.2", - "webpack": "^3.0.0", - "webpack-dev-middleware": "^1.12.0", - "webpack-dev-server": "^2.9.1", - "webpack-merge": "^4.1.0", - "xml-loader": "^1.2.1" - } + ... } ``` @@ -176,7 +158,7 @@ __src/index.js__ + } function component() { - var element = document.createElement('pre'); + let element = document.createElement('pre'); element.innerHTML = [ 'Hello webpack!', diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index ad79a19bc9a9..d5be9ad61fff 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -74,7 +74,8 @@ __webpack.config.js__ print: './src/print.js' }, plugins: [ - new CleanWebpackPlugin(['dist']), + // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ - title: 'Output Management' + title: 'Progressive Web Application' diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.md index 5aaa2e389bab..f10d9f29e5d8 100644 --- a/src/content/guides/shimming.md +++ b/src/content/guides/shimming.md @@ -56,7 +56,7 @@ __src/index.js__ - import _ from 'lodash'; - function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); - // Lodash, now imported by this script element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -107,7 +107,7 @@ __src/index.js__ ``` diff function component() { - var element = document.createElement('div'); + let element = document.createElement('div'); - element.innerHTML = _.join(['Hello', 'webpack'], ' '); + element.innerHTML = join(['Hello', 'webpack'], ' '); diff --git a/src/content/guides/tree-shaking.md b/src/content/guides/tree-shaking.md index 1a43e62e07ec..abaf6b9a2c4a 100644 --- a/src/content/guides/tree-shaking.md +++ b/src/content/guides/tree-shaking.md @@ -92,8 +92,8 @@ __src/index.js__ + import { cube } from './math.js'; function component() { -- var element = document.createElement('div'); -+ var element = document.createElement('pre'); +- let element = document.createElement('div'); ++ let element = document.createElement('pre'); - // Lodash, now imported by this script - element.innerHTML = _.join(['Hello', 'webpack'], ' ');