├── demo17-clean ├── src │ ├── app.js │ └── style.css ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo11-css ├── src │ ├── style2.css │ ├── style1.css │ └── app.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo07-html ├── src │ ├── style.css │ ├── app2.js │ └── app.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo13-postcss ├── src │ ├── style2.css │ ├── style1.css │ └── app.js ├── postcss.config.js ├── package.json ├── index.html ├── webpack.config.js └── readme.md ├── demo01 ├── src │ ├── index.js │ └── hello.js └── readme.md ├── demo08-SplitChunksPlugin ├── src │ ├── module2.js │ ├── module3.js │ ├── module1.js │ ├── app2.js │ └── app1.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo02-config ├── src │ ├── index.js │ └── hello.js ├── webpack.config.js └── readme.md ├── demo12-scss ├── src │ ├── style2.scss │ ├── style1.scss │ └── app.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo14-mini ├── demo14-1-css │ ├── src │ │ ├── module1 │ │ │ ├── module1.css │ │ │ └── module1.js │ │ ├── module2 │ │ │ ├── module2.css │ │ │ └── module2.js │ │ ├── styles │ │ │ ├── async-style.css │ │ │ └── common.css │ │ └── app.js │ ├── vendor │ │ ├── vendor.css │ │ └── vendor.js │ ├── index.html │ ├── package.json │ └── webpack.config.js ├── demo14-2-scss │ ├── src │ │ ├── module1 │ │ │ ├── module1.scss │ │ │ └── module1.js │ │ ├── module2 │ │ │ ├── module2.scss │ │ │ └── module2.js │ │ ├── styles │ │ │ ├── async-style.scss │ │ │ └── common.scss │ │ └── app.js │ ├── vendor │ │ ├── vendor.css │ │ └── vendor.js │ ├── index.html │ ├── package.json │ └── webpack.config.js └── readme.md ├── demo09-split-vendor-async ├── src │ ├── async-module1.js │ ├── async-module2.js │ ├── module.js │ └── app.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo16-font ├── src │ ├── app.js │ └── assets │ │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ ├── icomoon.css │ │ └── icomoon.svg │ │ └── styles │ │ └── app.css ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo18-devServer ├── src │ ├── app.js │ └── assets │ │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ ├── icomoon.css │ │ └── icomoon.svg │ │ └── styles │ │ └── app.css ├── package.json ├── index.html ├── webpack.config.js └── readme.md ├── .gitignore ├── demo15-img ├── src │ ├── assets │ │ ├── imgs │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ └── 3.png │ │ └── styles │ │ │ └── app.css │ └── app.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo03-js-module ├── src │ ├── lib │ │ ├── hello-es6.js │ │ ├── hello-common.js │ │ └── hello-amd.js │ └── app.js ├── webpack.config.js ├── index.html └── readme.md ├── demo19-dev-prod ├── src │ ├── assets │ │ ├── images │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── me.jpg │ │ ├── fonts │ │ │ ├── icomoon.eot │ │ │ ├── icomoon.ttf │ │ │ ├── icomoon.woff │ │ │ ├── icomoon.css │ │ │ └── icomoon.svg │ │ └── styles │ │ │ ├── app.scss │ │ │ └── loading.scss │ ├── app │ │ └── app.ts │ └── index.html ├── postcss.config.js ├── tsconfig.json ├── build │ ├── config.js │ ├── webpack.dev.conf.js │ ├── webpack.base.conf.js │ └── webpack.prod.conf.js ├── package.json ├── .gitignore └── readme.md ├── demo10-tree-shaking ├── src │ ├── app.js │ └── module.js ├── package.json ├── webpack.config.js ├── index.html └── readme.md ├── demo05-ts ├── src │ ├── User.ts │ └── app.ts ├── tsconfig.json ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo06-babel-ts ├── src │ ├── User.ts │ ├── app.ts │ └── new-features.ts ├── tsconfig.json ├── babel.config.js ├── index.html ├── package.json ├── webpack.config.js └── readme.md ├── demo04-babel7 ├── babel.config.js ├── webpack.config.js ├── index.html ├── package.json ├── src │ └── app.js └── readme.md └── readme.md /demo17-clean/src/app.js: -------------------------------------------------------------------------------- 1 | const css = import('./style.css'); -------------------------------------------------------------------------------- /demo11-css/src/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | } 4 | -------------------------------------------------------------------------------- /demo07-html/src/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: red; 3 | } -------------------------------------------------------------------------------- /demo13-postcss/src/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | } 4 | -------------------------------------------------------------------------------- /demo01/src/index.js: -------------------------------------------------------------------------------- 1 | import { sayHello } from './hello'; 2 | sayHello(); -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/src/module2.js: -------------------------------------------------------------------------------- 1 | export const module2 = 'module2'; -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/src/module3.js: -------------------------------------------------------------------------------- 1 | export const module3 = 'module3'; -------------------------------------------------------------------------------- /demo17-clean/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /demo02-config/src/index.js: -------------------------------------------------------------------------------- 1 | import { sayHello } from './hello'; 2 | sayHello(); -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/src/module1.js: -------------------------------------------------------------------------------- 1 | export const module1 = 'module1'; 2 | -------------------------------------------------------------------------------- /demo01/src/hello.js: -------------------------------------------------------------------------------- 1 | export function sayHello() { 2 | console.log('hello world!'); 3 | } -------------------------------------------------------------------------------- /demo12-scss/src/style2.scss: -------------------------------------------------------------------------------- 1 | $color: black; 2 | body { 3 | color: $color; 4 | } 5 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/module1/module1.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | } 4 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/module1/module1.scss: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | } 4 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/module2/module2.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 100px; 3 | } 4 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/module2/module2.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 100px; 3 | } 4 | -------------------------------------------------------------------------------- /demo02-config/src/hello.js: -------------------------------------------------------------------------------- 1 | export function sayHello() { 2 | console.log('hello world!'); 3 | } -------------------------------------------------------------------------------- /demo09-split-vendor-async/src/async-module1.js: -------------------------------------------------------------------------------- 1 | export const data = 'this is async module1'; 2 | -------------------------------------------------------------------------------- /demo09-split-vendor-async/src/async-module2.js: -------------------------------------------------------------------------------- 1 | export const data = 'this is async module2'; 2 | -------------------------------------------------------------------------------- /demo12-scss/src/style1.scss: -------------------------------------------------------------------------------- 1 | $bgColor: red; 2 | body { 3 | background-color: $bgColor; 4 | } 5 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/styles/async-style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /demo07-html/src/app2.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("click", function () { 2 | console.log('css'); 3 | }); -------------------------------------------------------------------------------- /demo11-css/src/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: red; 3 | } 4 | /* console.log('11111'); */ 5 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/module2/module2.js: -------------------------------------------------------------------------------- 1 | import './module2.css'; 2 | console.log('这里是异步module2'); -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/styles/async-style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /demo16-font/src/app.js: -------------------------------------------------------------------------------- 1 | import "./assets/fonts/icomoon.css"; 2 | import "./assets/styles/app.css"; 3 | -------------------------------------------------------------------------------- /demo13-postcss/src/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: red; 3 | transform: all 1s; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/module1/module1.js: -------------------------------------------------------------------------------- 1 | import './module1.css'; 2 | console.log('这里是同步module1'); 3 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/vendor/vendor.css: -------------------------------------------------------------------------------- 1 | /* 第三方包css */ 2 | body { 3 | border: 1px solid black; 4 | } 5 | -------------------------------------------------------------------------------- /demo18-devServer/src/app.js: -------------------------------------------------------------------------------- 1 | import "./assets/fonts/icomoon.css"; 2 | import "./assets/styles/app.css"; 3 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/module2/module2.js: -------------------------------------------------------------------------------- 1 | import './module2.scss'; 2 | 3 | console.log('这里是异步module2'); -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/vendor/vendor.css: -------------------------------------------------------------------------------- 1 | /* 第三方包css */ 2 | body { 3 | border: 1px solid black; 4 | } 5 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/vendor/vendor.js: -------------------------------------------------------------------------------- 1 | // 这里假设vendor为第三方包 2 | import './vendor.css'; 3 | console.log('这里是第三方依赖包'); -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/module1/module1.js: -------------------------------------------------------------------------------- 1 | import './module1.scss'; 2 | 3 | console.log('这里是同步module1'); 4 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/vendor/vendor.js: -------------------------------------------------------------------------------- 1 | // 这里假设vendor为第三方包 2 | import './vendor.css'; 3 | console.log('这里是第三方依赖包'); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | npm-debug.log 3 | **/package-lock.json 4 | vscode 5 | **/dist 6 | **/.vscode-upload.json 7 | __bak -------------------------------------------------------------------------------- /demo15-img/src/assets/imgs/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo15-img/src/assets/imgs/1.png -------------------------------------------------------------------------------- /demo15-img/src/assets/imgs/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo15-img/src/assets/imgs/2.png -------------------------------------------------------------------------------- /demo15-img/src/assets/imgs/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo15-img/src/assets/imgs/3.png -------------------------------------------------------------------------------- /demo03-js-module/src/lib/hello-es6.js: -------------------------------------------------------------------------------- 1 | // 使用es6规范来写代码 2 | export default function () { 3 | console.log('es6: hello world!'); 4 | } 5 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/styles/common.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑"; 3 | } 4 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/styles/common.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑"; 3 | } 4 | -------------------------------------------------------------------------------- /demo03-js-module/src/lib/hello-common.js: -------------------------------------------------------------------------------- 1 | // 使用commonjs规范来写代码 2 | module.exports = function () { 3 | console.log('common: hello world!'); 4 | }; -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/images/1.png -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/images/2.png -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/images/3.png -------------------------------------------------------------------------------- /demo16-font/src/assets/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo16-font/src/assets/fonts/icomoon.eot -------------------------------------------------------------------------------- /demo16-font/src/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo16-font/src/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /demo16-font/src/assets/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo16-font/src/assets/fonts/icomoon.woff -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/images/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/images/me.jpg -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/fonts/icomoon.eot -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /demo10-tree-shaking/src/app.js: -------------------------------------------------------------------------------- 1 | // 只导入了 sayHello1 ,观察打包后的 bundle 代码，移除了 sayHello2 和 sayHello3 的代码 2 | import { sayHello1 } from './module'; 3 | 4 | sayHello1(); -------------------------------------------------------------------------------- /demo13-postcss/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: 'postcss', 3 | plugins: { 4 | 'autoprefixer': {} /*postcss调用autoprefixer插件*/ 5 | } 6 | } -------------------------------------------------------------------------------- /demo18-devServer/src/assets/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo18-devServer/src/assets/fonts/icomoon.eot -------------------------------------------------------------------------------- /demo18-devServer/src/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo18-devServer/src/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /demo18-devServer/src/assets/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo18-devServer/src/assets/fonts/icomoon.woff -------------------------------------------------------------------------------- /demo19-dev-prod/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: 'postcss', 3 | plugins: { 4 | 'autoprefixer': {} /*postcss调用autoprefixer插件*/ 5 | } 6 | } -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SimpleCodeCX/simple-webpack-demos/HEAD/demo19-dev-prod/src/assets/fonts/icomoon.woff -------------------------------------------------------------------------------- /demo07-html/src/app.js: -------------------------------------------------------------------------------- 1 | // const css = import('./style.css'); 2 | window.addEventListener("click", function () { 3 | const css = import('./style.css'); 4 | console.log(css); 5 | }); -------------------------------------------------------------------------------- /demo03-js-module/src/lib/hello-amd.js: -------------------------------------------------------------------------------- 1 | // 使用amd规范来写代码 2 | define(function (require, factory) { 3 | 'use strict'; 4 | return function () { 5 | console.log('amd: hello world!'); 6 | } 7 | }); -------------------------------------------------------------------------------- /demo15-img/src/app.js: -------------------------------------------------------------------------------- 1 | // 同步加载 2 | import "./assets/styles/app.css"; 3 | 4 | // window.addEventListener("click", function () { 5 | // // 试试异步加载? 查看浏览器控制台试试 6 | // import("./assets/styles/app.css"); 7 | // }); -------------------------------------------------------------------------------- /demo16-font/src/assets/styles/app.css: -------------------------------------------------------------------------------- 1 | .icons-box { 2 | width: 500px; 3 | height: 100px; 4 | margin: auto; 5 | margin-top: 180px; 6 | } 7 | 8 | .icons-box i { 9 | font-size: 100px; 10 | margin-left: 20px; 11 | } 12 | -------------------------------------------------------------------------------- /demo18-devServer/src/assets/styles/app.css: -------------------------------------------------------------------------------- 1 | .icons-box { 2 | width: 500px; 3 | height: 100px; 4 | margin: auto; 5 | margin-top: 180px; 6 | } 7 | 8 | .icons-box i { 9 | font-size: 100px; 10 | margin-left: 20px; 11 | } 12 | -------------------------------------------------------------------------------- /demo05-ts/src/User.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | name: String, 3 | age: String, 4 | hobby: String, 5 | options?: Object // 可选参数 6 | } 7 | 8 | // 理解一下 webpack 的 Tree Sharking? 9 | export interface Animal { 10 | name: String 11 | } 12 | -------------------------------------------------------------------------------- /demo12-scss/src/app.js: -------------------------------------------------------------------------------- 1 | // 同步加载 2 | // import "./style1.scss"; 3 | // import "./style2.scss"; 4 | 5 | 6 | window.addEventListener("click", function () { 7 | // 试试异步加载? 查看控制台试试 8 | const style1 = import("./style1.scss"); 9 | const style2 = import("./style2.scss"); 10 | }); -------------------------------------------------------------------------------- /demo11-css/src/app.js: -------------------------------------------------------------------------------- 1 | // 同步加载 2 | import "./style1.css"; 3 | import "./style2.css"; 4 | 5 | 6 | // window.addEventListener("click", function () { 7 | // // 试试异步加载? 查看浏览器控制台试试 8 | // const style1 = import("./style1.css"); 9 | // const style2 = import("./style2.css"); 10 | // }); -------------------------------------------------------------------------------- /demo13-postcss/src/app.js: -------------------------------------------------------------------------------- 1 | // 同步加载 2 | import "./style1.css"; 3 | import "./style2.css"; 4 | 5 | 6 | // window.addEventListener("click", function () { 7 | // // 试试异步加载? 查看浏览器控制台试试 8 | // const style1 = import("./style1.css"); 9 | // const style2 = import("./style2.css"); 10 | // }); -------------------------------------------------------------------------------- /demo06-babel-ts/src/User.ts: -------------------------------------------------------------------------------- 1 | // interface typescript 的类型 2 | export interface User { 3 | name: String, 4 | age: String, 5 | hobby: String, 6 | options?: Object // 可选参数 7 | } 8 | 9 | // 理解一下 webpack 的 Tree Sharking? 10 | export interface Animal { 11 | name: String 12 | } 13 | 14 | -------------------------------------------------------------------------------- /demo10-tree-shaking/src/module.js: -------------------------------------------------------------------------------- 1 | export const sayHello1 = () => { 2 | console.log('Hi I want to say hello1'); 3 | } 4 | 5 | export const sayHello2 = () => { 6 | console.log('Hi I want to say hello2'); 7 | } 8 | 9 | export const sayHello3 = () => { 10 | console.log('Hi I want to say hello3'); 11 | } -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/src/app2.js: -------------------------------------------------------------------------------- 1 | import { module1 } from './module1'; 2 | import { module2 } from './module2'; 3 | import { module3 } from './module3'; 4 | 5 | // module1 module2 module3 都属于同步加载（注意对比app1.js） 6 | console.log('app2: ', module1); 7 | console.log('app2: ', module2); 8 | console.log('app2: ', module3); -------------------------------------------------------------------------------- /demo09-split-vendor-async/src/module.js: -------------------------------------------------------------------------------- 1 | export const sayHello1 = () => { 2 | console.log('Hi I want to say hello1'); 3 | } 4 | 5 | export const sayHello2 = () => { 6 | console.log('Hi I want to say hello2'); 7 | } 8 | 9 | export const sayHello3 = () => { 10 | console.log('Hi I want to say hello3'); 11 | } -------------------------------------------------------------------------------- /demo05-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "allowJs": true, 6 | "lib": [ 7 | "es2018", 8 | "dom" 9 | ], 10 | }, 11 | "include": [ 12 | "./src/*" 13 | ], 14 | "exclude": [ 15 | "./node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /demo06-babel-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "allowJs": true, 6 | "lib": [ 7 | "es2018", 8 | "dom" 9 | ], 10 | }, 11 | "include": [ 12 | "./src/*" 13 | ], 14 | "exclude": [ 15 | "./node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /demo05-ts/src/app.ts: -------------------------------------------------------------------------------- 1 | import { User } from './User'; 2 | 3 | const user1: User = { 4 | name: 'simple', 5 | age: '25', 6 | hobby: 'play the guitar' 7 | }; 8 | 9 | // 这里参数不够，tsc编译器会报错，webpack编译不通过 10 | // const user2: User = { 11 | // name: 'simple2', 12 | // age: '25' 13 | // }; 14 | 15 | console.log(user1); 16 | 17 | -------------------------------------------------------------------------------- /demo02-config/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | mode: 'production' || 'development', 5 | entry: { 6 | src: "./src/index.js", // 入口文件 7 | }, 8 | output: { 9 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 10 | filename: "app.bundle.js", 11 | } 12 | }; 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /demo03-js-module/src/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * webpack支持ES6、CommonJs和AMD规范 3 | */ 4 | 5 | // ES6 6 | import es6Hello from './lib/hello-es6'; 7 | es6Hello(); 8 | 9 | // CommonJs 10 | var commonHello = require('./lib/hello-common'); 11 | commonHello(); 12 | 13 | // AMD 14 | require(['./lib/hello-amd'], function (helloAmd) { 15 | helloAmd(); 16 | }); -------------------------------------------------------------------------------- /demo17-clean/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo17 clean 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo04-babel7/babel.config.js: -------------------------------------------------------------------------------- 1 | const presets = [ 2 | [ 3 | "@babel/env", 4 | { 5 | targets: { // 配置需要兼容的浏览器 6 | edge: "17", 7 | firefox: "60", 8 | chrome: "67", 9 | safari: "11.1", 10 | ie: "11" 11 | }, 12 | useBuiltIns: "usage" 13 | }, 14 | ], 15 | ]; 16 | 17 | module.exports = { presets }; -------------------------------------------------------------------------------- /demo10-tree-shaking/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo10", 3 | "version": "1.0.0", 4 | "description": "webpack tree shaking", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "tree shaking" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC" 15 | } -------------------------------------------------------------------------------- /demo13-postcss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo13", 3 | "version": "1.0.0", 4 | "description": "webpack postcss-loader", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "postcss-loader" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC" 15 | } -------------------------------------------------------------------------------- /demo03-js-module/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | mode: 'production' || 'development', 5 | entry: { 6 | app: "./src/app.js" 7 | }, 8 | output: { 9 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 10 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 11 | filename: "app.bundle.js" 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /demo06-babel-ts/src/app.ts: -------------------------------------------------------------------------------- 1 | import "@babel/polyfill"; 2 | import './new-features'; 3 | import { User } from './User'; 4 | 5 | const user1: User = { 6 | name: 'simple', 7 | age: '25', 8 | hobby: 'play the guitar' 9 | }; 10 | 11 | // 这里参数不够，tsc编译器会报错，webpack编译不通过 12 | // const user2: User = { 13 | // name: 'simple2', 14 | // age: '25' 15 | // }; 16 | 17 | console.log(user1); 18 | 19 | -------------------------------------------------------------------------------- /demo06-babel-ts/babel.config.js: -------------------------------------------------------------------------------- 1 | const presets = [ 2 | [ 3 | "@babel/env", 4 | { 5 | targets: { 6 | edge: "17", 7 | firefox: "60", 8 | chrome: "67", 9 | safari: "11.1", 10 | ie: "11" 11 | }, 12 | // useBuiltIns: "usage" // 和ts结合的情况，这个属性无效，需要手动import "@babel/polyfill"; 13 | }, 14 | ], 15 | ]; 16 | 17 | module.exports = { presets }; -------------------------------------------------------------------------------- /demo07-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo07 html 13 |
14 | 点击屏幕后，背景变红 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo11-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo11 css 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /demo15-img/src/assets/styles/app.css: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .container div{ 8 | width:200px; 9 | height: 200px; 10 | float: left; 11 | } 12 | .div1{ 13 | background: url("../imgs/1.png") no-repeat; 14 | } 15 | 16 | .div2{ 17 | background: url("../imgs/2.png") no-repeat; 18 | } 19 | 20 | .div3{ 21 | background: url("../imgs/3.png") no-repeat; 22 | } -------------------------------------------------------------------------------- /demo19-dev-prod/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "allowJs": true, 6 | "lib": [ 7 | "dom", 8 | "es5", 9 | "es6", 10 | "es7", 11 | "es2018", 12 | "es2015.promise" 13 | ], 14 | }, 15 | "include": [ 16 | "./src/app/*" 17 | ], 18 | "exclude": [ 19 | "./node_modules" 20 | ] 21 | } -------------------------------------------------------------------------------- /demo10-tree-shaking/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | mode: "production" || "development", // tree shaking 需要使用 "production" 模式 5 | entry: { 6 | app: "./src/app.js" 7 | }, 8 | output: { 9 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 10 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 11 | filename: "[name].bundle.js" 12 | } 13 | }; -------------------------------------------------------------------------------- /demo10-tree-shaking/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo10 tree shaking 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo14-1 css 13 |
14 | 点击屏幕后，加载异步模块，背景变红 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo14-2 scss 13 |
14 | 点击屏幕后，加载异步模块，背景变红 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo04-babel7/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: 'production' || 'development', 3 | entry: { 4 | app: "./src/app.js" 5 | }, 6 | output: { 7 | filename: "app.bundle.js" 8 | }, 9 | module: { 10 | rules: [ 11 | { 12 | test: /\.js$/, 13 | exclude: /(node_modules)/, 14 | use: { 15 | loader: "babel-loader" 16 | } 17 | } 18 | ] 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo08 SplitChunksPlugin 13 |
14 | 请查看控制台，3秒后会异步加载模块 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo19-dev-prod/build/config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | dev: { 6 | publicPath: '/', 7 | filename: '[name].[chunkhash:8].bundle.js', 8 | chunkFilename: '[name].[chunkhash:8].chunk.js' 9 | }, 10 | prod: { 11 | publicPath: './', 12 | filename: '[id].[name].[chunkhash:8].bundle.js', 13 | chunkFilename: '[id].[name].[chunkhash:8].chunk.js' 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo09-split-vendor-async/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo09 splitChunks vendor async 13 |
14 | 请查看控制台，3秒后会异步加载模块 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo05-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo05 ts 13 |
14 | 请查看控制台，console 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo05-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo05", 3 | "version": "1.0.0", 4 | "description": "demo05", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "typescript" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "ts-loader": "^5.3.3", 17 | "typescript": "^3.3.3333" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo03-js-module/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo03 js module 13 |
14 | 请查看控制台，console 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo04-babel7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo04 babel7 13 |
14 | 请分别用 ie 和 Chrome 查看控制台，console 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo18-devServer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack-dev-server --open" 4 | }, 5 | "devDependencies": { 6 | "clean-webpack-plugin": "^1.0.1", 7 | "css-loader": "^1.0.0", 8 | "file-loader": "^1.1.11", 9 | "html-webpack-plugin": "^3.2.0", 10 | "mini-css-extract-plugin": "^0.5.0", 11 | "url-loader": "^1.0.1", 12 | "webpack": "^4.29.6", 13 | "webpack-cli": "^3.2.3", 14 | "webpack-dev-server": "^3.2.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /demo06-babel-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo06 babel ts 13 |
14 | 请分别用 ie 和 Chrome 查看控制台，console 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo08", 3 | "version": "1.0.0", 4 | "description": "webpack splitChunks", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "splitChunks" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "html-webpack-plugin": "^3.2.0", 17 | "webpack": "^4.29.6" 18 | } 19 | } -------------------------------------------------------------------------------- /demo11-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo11", 3 | "version": "1.0.0", 4 | "description": "webpack css", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "css" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^2.1.0", 17 | "file-loader": "^3.0.1", 18 | "style-loader": "^0.23.1" 19 | } 20 | } -------------------------------------------------------------------------------- /demo13-postcss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo13 postcss 13 | 14 |
15 | 查看body的transform样式被添加了前缀。 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /demo12-scss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo12 scss 13 |
14 | 点击屏幕后，背景变红 15 |
16 |
17 | 并且可以通过控制台看到异步加载 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /demo07-html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo07", 3 | "version": "1.0.0", 4 | "description": "webpack HtmlWebpackPlugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "HtmlWebpackPlugin" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^2.1.0", 17 | "html-webpack-plugin": "^3.2.0", 18 | "style-loader": "^0.23.1", 19 | "webpack": "^4.29.5" 20 | } 21 | } -------------------------------------------------------------------------------- /demo12-scss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo12", 3 | "version": "1.0.0", 4 | "description": "webpack scss", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "scss" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^2.1.0", 17 | "file-loader": "^3.0.1", 18 | "node-sass": "^4.11.0", 19 | "sass-loader": "^7.1.0", 20 | "style-loader": "^0.23.1" 21 | } 22 | } -------------------------------------------------------------------------------- /demo16-font/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo16 font 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /demo04-babel7/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo04", 3 | "version": "1.0.0", 4 | "description": "webpack babel7", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "babel7" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@babel/polyfill": "^7.2.5" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.3.4", 20 | "@babel/preset-env": "^7.3.4", 21 | "babel-loader": "^8.0.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo18-devServer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo18 devServer 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /demo09-split-vendor-async/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo09", 3 | "version": "1.0.0", 4 | "description": "webpack splitChunks", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "splitChunks" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "html-webpack-plugin": "^3.2.0", 17 | "webpack": "^4.29.6" 18 | }, 19 | "dependencies": { 20 | "axios": "^0.18.0", 21 | "lodash": "^4.17.11" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo14-css", 3 | "version": "1.0.0", 4 | "description": "webpack mini-css-extract-plugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "mini-css-extract-plugin" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^2.1.0", 17 | "html-webpack-plugin": "^3.2.0", 18 | "mini-css-extract-plugin": "^0.5.0", 19 | "webpack": "^4.29.5" 20 | } 21 | } -------------------------------------------------------------------------------- /demo15-img/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Webpack4系列实践Demo 9 | 10 | 11 | 12 | demo15 img 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /demo05-ts/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | module.exports = { 3 | mode: 'production' || 'development', 4 | entry: { 5 | index: "./src/app.ts" 6 | }, 7 | output: { 8 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 9 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 10 | filename: "app.bundle.js" 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.ts?$/, 16 | use: 'ts-loader', 17 | exclude: /node_modules/ 18 | } 19 | ] 20 | }, 21 | resolve: { 22 | extensions: ['.ts', '.js'] 23 | } 24 | } -------------------------------------------------------------------------------- /demo15-img/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo15", 3 | "version": "1.0.0", 4 | "description": "webpack url-loader", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "url-loader" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^2.1.0", 17 | "file-loader": "^3.0.1", 18 | "html-webpack-plugin": "^3.2.0", 19 | "style-loader": "^0.23.1", 20 | "url-loader": "^1.1.2", 21 | "webpack": "^4.29.6" 22 | } 23 | } -------------------------------------------------------------------------------- /demo17-clean/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo17", 3 | "version": "1.0.0", 4 | "description": "webpack clean-webpack-plugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "clean-webpack-plugin" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "clean-webpack-plugin": "^1.0.1", 17 | "css-loader": "^2.1.0", 18 | "html-webpack-plugin": "^3.2.0", 19 | "style-loader": "^0.23.1", 20 | "webpack": "^4.29.5" 21 | } 22 | } -------------------------------------------------------------------------------- /demo14-mini/demo14-1-css/src/app.js: -------------------------------------------------------------------------------- 1 | // 同步加载common.css 2 | import './styles/common.css'; 3 | 4 | // 同步加载module1.js 5 | import * as module1 from './module1/module1'; 6 | 7 | // 同步加载第三方包vendor.js 8 | import * as vendor from '../vendor/vendor'; 9 | 10 | window.addEventListener('click', function () { 11 | // 异步加载module2.js 12 | import(/* webpackChunkName: 'module2'*/ './module2/module2').then(_ => { 13 | console.log('加载异步module2成功'); 14 | }); 15 | // async-style.css 16 | import(/* webpackChunkName: 'async-style'*/'./styles/async-style.css').then(_ => { 17 | console.log('加载异步async-style.css成功'); 18 | }); 19 | 20 | }); 21 | -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/src/app.js: -------------------------------------------------------------------------------- 1 | // 同步加载common.scss 2 | import './styles/common.scss'; 3 | 4 | // 同步加载module1.js 5 | import * as module1 from './module1/module1'; 6 | 7 | // 同步加载第三方包vendor.js 8 | import * as vendor from '../vendor/vendor'; 9 | 10 | window.addEventListener('click', function () { 11 | // 异步加载module2.js 12 | import(/* webpackChunkName: 'module2'*/ './module2/module2').then(_ => { 13 | console.log('加载异步module2成功'); 14 | }); 15 | // async-style.scss 16 | import(/* webpackChunkName: 'async-style'*/'./styles/async-style.scss').then(_ => { 17 | console.log('加载异步async-style.scss成功'); 18 | }); 19 | 20 | }); 21 | -------------------------------------------------------------------------------- /demo16-font/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo16", 3 | "version": "1.0.0", 4 | "description": "webpack url-loader", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "url-loader" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^1.0.0", 17 | "file-loader": "^1.1.11", 18 | "html-webpack-plugin": "^3.2.0", 19 | "mini-css-extract-plugin": "^0.5.0", 20 | "style-loader": "^0.21.0", 21 | "url-loader": "^1.0.1", 22 | "webpack": "^4.29.6" 23 | } 24 | } -------------------------------------------------------------------------------- /demo14-mini/demo14-2-scss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo14-scss", 3 | "version": "1.0.0", 4 | "description": "webpack mini-css-extract-plugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "mini-css-extract-plugin" 12 | ], 13 | "author": "Simple", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "css-loader": "^2.1.0", 17 | "node-sass": "^4.11.0", 18 | "sass-loader": "^7.1.0", 19 | "html-webpack-plugin": "^3.2.0", 20 | "mini-css-extract-plugin": "^0.5.0", 21 | "webpack": "^4.29.5" 22 | } 23 | } -------------------------------------------------------------------------------- /demo06-babel-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo06", 3 | "version": "1.0.0", 4 | "description": "webpack @babel typescript", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "webpack", 11 | "@babel", 12 | "typescript" 13 | ], 14 | "author": "Simple", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@babel/core": "^7.3.3", 18 | "@babel/preset-env": "^7.3.1", 19 | "babel-loader": "^8.0.5", 20 | "ts-loader": "^5.3.3", 21 | "typescript": "^3.3.3333" 22 | }, 23 | "dependencies": { 24 | "@babel/polyfill": "^7.2.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /demo08-SplitChunksPlugin/src/app1.js: -------------------------------------------------------------------------------- 1 | import { module1 } from './module1'; 2 | import { module2 } from './module2'; 3 | 4 | // module1 module2 属于同步加载 5 | console.log('app1: ', module1); 6 | console.log('app1: ', module2); 7 | 8 | // 通过require.ensure对module3.js进行加载调用（此写法在ts模式支持） 9 | setTimeout(() => { 10 | require.ensure( 11 | [], 12 | function () { 13 | const module3 = require("./module3"); 14 | console.log('app1: ', module3.module3); 15 | }, 16 | "module3" 17 | ); 18 | }, 3000); 19 | 20 | // // 异步加载的另一种写法（此写法在ts模式下不支持） 21 | // setTimeout(() => { 22 | // import(/* webpackChunkName: 'module3'*/ "./module3").then(function (module3) { 23 | // console.log(module3.module3); 24 | // }); 25 | // }, 3000); 26 | -------------------------------------------------------------------------------- /demo06-babel-ts/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | module.exports = { 3 | mode: 'production' || 'development', 4 | entry: { 5 | index: "./src/app.ts" 6 | }, 7 | output: { 8 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 9 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 10 | filename: "app.bundle.js" 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /(node_modules)/, 17 | use: { 18 | loader: "babel-loader" 19 | } 20 | }, 21 | { 22 | test: /\.ts?$/, 23 | use: 'ts-loader', 24 | exclude: /node_modules/ 25 | } 26 | ] 27 | }, 28 | resolve: { 29 | extensions: ['.ts', '.js'] 30 | } 31 | } -------------------------------------------------------------------------------- /demo19-dev-prod/src/app/app.ts: -------------------------------------------------------------------------------- 1 | import '../assets/styles/app.scss'; 2 | import "../assets/fonts/icomoon.css"; 3 | import 'swiper/dist/css/swiper.min.css'; 4 | import * as Swiper from 'swiper/dist/js/swiper'; 5 | 6 | var iframe = document.getElementById("iframe1"); 7 | if (iframe['attachEvent']) { 8 | iframe['attachEvent']("onload", function () { 9 | new Swiper('.swiper-container', { 10 | autoplay: { 11 | delay: 50 12 | }, 13 | loop: true, 14 | speed: 50 15 | }); 16 | }); 17 | } else { 18 | iframe.onload = function () { 19 | new Swiper('.swiper-container', { 20 | autoplay: { 21 | delay: 5000 22 | }, 23 | loop: true, 24 | speed: 1500 25 | }); 26 | }; 27 | } 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /demo09-split-vendor-async/src/app.js: -------------------------------------------------------------------------------- 1 | import { sayHello1, sayHello2, sayHello3 } from './module'; 2 | 3 | sayHello1(); 4 | sayHello2(); 5 | sayHello3(); 6 | 7 | 8 | // 异步加载async-module1 9 | setTimeout(() => { 10 | require.ensure( 11 | [], 12 | function () { 13 | const asyncModule = require("./async-module1"); 14 | console.log(asyncModule.data); 15 | }, 16 | "module1" 17 | ); 18 | }, 3000); 19 | 20 | // 异步加载async-module2 21 | setTimeout(() => { 22 | require.ensure( 23 | [], 24 | function () { 25 | const asyncModule2 = require("./async-module2"); 26 | console.log(asyncModule2.data); 27 | }, 28 | "module2" 29 | ); 30 | }, 3000); 31 | 32 | 33 | // 引用第三方库 34 | // https://github.com/lodash/lodash 35 | import * as _ from "lodash"; 36 | // https://github.com/axios/axios 37 | import * as axios from "axios"; 38 | 39 | console.log(_); 40 | console.log(axios); 41 | -------------------------------------------------------------------------------- /demo04-babel7/src/app.js: -------------------------------------------------------------------------------- 1 | // import "@babel/polyfill"; 2 | let func = () => { }; 3 | 4 | /** 5 | * Array.prototype.includes 不兼容 ie 11,详见 mdn 文档 6 | * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes 7 | * 所以需要通过 @babel/polyfill 来实现 8 | */ 9 | const pets = ['cat', 'dog', 'bat']; 10 | console.log(pets.includes('cat')); 11 | 12 | /** 13 | * new Set不兼容 ie 11,详见 mdn 文档 14 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set 15 | */ 16 | const set1 = new Set([1, 2, 3, 4, 5]); 17 | console.log(set1.has(1)); 18 | 19 | /** 20 | * WeakMap 的 set方法在 ie 11 下不支持，详见 mdn 文档 21 | * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap 22 | */ 23 | var o1 = {}, 24 | o2 = function () { }, 25 | o3 = window; 26 | let weakmap = new WeakMap(); 27 | weakmap.set(o1, 1); 28 | weakmap.set(o2, 2); 29 | weakmap.set(o3, 3); 30 | console.log(weakmap.get(o1)); // => 1 -------------------------------------------------------------------------------- /demo19-dev-prod/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path'); 3 | const merge = require('webpack-merge') 4 | const baseWebpackConfig = require('./webpack.base.conf') 5 | 6 | const devWebpackConfig = merge(baseWebpackConfig, { 7 | devtool: "source-map", 8 | devServer: { 9 | contentBase: path.join(__dirname, "../dist/"), 10 | port: 8000, 11 | hot: false, 12 | overlay: true, 13 | historyApiFallback: { 14 | rewrites: [{ from: /.*/, to: "/index.html" }] 15 | } 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.(sa|sc|c)ss$/, 21 | use: [ 22 | "style-loader", 23 | "css-loader", // 将 CSS 转化成 js 模块 24 | { 25 | loader: 'postcss-loader' // 配置在postcss.config.js 26 | }, 27 | "sass-loader" // 将 Sass/Scss 编译成 CSS 28 | ] 29 | } 30 | ] 31 | }, 32 | plugins: [] 33 | }); 34 | module.exports = devWebpackConfig; 35 | -------------------------------------------------------------------------------- /demo07-html/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: { 6 | app: "./src/app.js" 7 | // app2: "./src/app2.js" 8 | }, 9 | output: { 10 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 11 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 12 | filename: "[name].bundle.js" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.css$/, 18 | // css处理为style标签 19 | use: [ 20 | "style-loader", 21 | 'css-loader' 22 | ] 23 | } 24 | ] 25 | }, 26 | plugins: [ 27 | new HtmlWebpackPlugin({ 28 | title: '设置html的title',// 当设置了template选项后，title选项将失效 29 | filename: "index.html", 30 | template: "./index.html", 31 | // chunks: ["app"], // entry中的app入口才会被打包 32 | minify: { 33 | // 压缩选项 34 | collapseWhitespace: true 35 | } 36 | }), 37 | ] 38 | }; 39 | -------------------------------------------------------------------------------- /demo17-clean/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | const CleanWebpackPlugin = require("clean-webpack-plugin"); 4 | 5 | module.exports = { 6 | entry: { 7 | app: "./src/app.js" 8 | }, 9 | output: { 10 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 11 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 12 | filename: "[name]-[hash].bundle.js" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.css$/, 18 | // css处理为style标签 19 | use: [ 20 | "style-loader", 21 | 'css-loader' 22 | ] 23 | } 24 | ] 25 | }, 26 | plugins: [ 27 | new HtmlWebpackPlugin({ 28 | title: '设置html的title',// 当设置了template选项后，title选项将失效 29 | filename: "index.html", 30 | template: "./index.html", 31 | minify: { 32 | // 压缩选项 33 | collapseWhitespace: true 34 | } 35 | }), 36 | new CleanWebpackPlugin(["dist"]) 37 | ] 38 | }; 39 | -------------------------------------------------------------------------------- /demo06-babel-ts/src/new-features.ts: -------------------------------------------------------------------------------- 1 | // 使用javasript的新特性，比如Promise,WeadMap,Array.prototype.includes等 2 | // 不兼容ie 11，因此需要在应用入口(app.ts)导入@babel/polyfill包,在ie 11浏览器进行测试 3 | 4 | /** 5 | * Array.prototype.includes 不兼容ie 11,详见mdn文档 6 | * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes 7 | * 所以需要通过@babel/polyfill来实现 8 | */ 9 | const pets = ['cat', 'dog', 'bat']; 10 | console.log(pets.includes('cat')); 11 | 12 | /** 13 | * new Set不兼容ie 11,详见mdn文档 14 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set 15 | */ 16 | const set1 = new Set([1, 2, 3, 4, 5]); 17 | console.log(set1.has(1)); 18 | 19 | /** 20 | * WeakMap 的 set方法在ie 11下不支持，详见mdn文档 21 | * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap 22 | */ 23 | var o1 = {}, 24 | o2 = function () { }, 25 | o3 = window; 26 | let weakmap = new WeakMap(); 27 | weakmap.set(o1, 1); 28 | weakmap.set(o2, 2); 29 | weakmap.set(o3, 3); 30 | console.log(weakmap.get(o1)); // => 1 -------------------------------------------------------------------------------- /demo16-font/src/assets/fonts/icomoon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "icomoon"; 3 | src: url("./icomoon.eot?nn7hff"); 4 | src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"), 5 | url("./icomoon.ttf?nn7hff") format("truetype"), 6 | url("./icomoon.woff?nn7hff") format("woff"), 7 | url("./icomoon.svg?nn7hff#icomoon") format("svg"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], 13 | [class*=" icon-"] { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: "icomoon" !important; 16 | speak: none; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .icon-wechat:before { 29 | content: "\e900"; 30 | color: #7bb32e; 31 | } 32 | .icon-github:before { 33 | content: "\e902"; 34 | } 35 | .icon-envelop:before { 36 | content: "\e945"; 37 | } 38 | -------------------------------------------------------------------------------- /demo18-devServer/src/assets/fonts/icomoon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "icomoon"; 3 | src: url("./icomoon.eot?nn7hff"); 4 | src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"), 5 | url("./icomoon.ttf?nn7hff") format("truetype"), 6 | url("./icomoon.woff?nn7hff") format("woff"), 7 | url("./icomoon.svg?nn7hff#icomoon") format("svg"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], 13 | [class*=" icon-"] { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: "icomoon" !important; 16 | speak: none; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .icon-wechat:before { 29 | content: "\e900"; 30 | color: #7bb32e; 31 | } 32 | .icon-github:before { 33 | content: "\e902"; 34 | } 35 | .icon-envelop:before { 36 | content: "\e945"; 37 | } 38 | -------------------------------------------------------------------------------- /demo19-dev-prod/src/assets/fonts/icomoon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "icomoon"; 3 | src: url("./icomoon.eot?nn7hff"); 4 | src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"), 5 | url("./icomoon.ttf?nn7hff") format("truetype"), 6 | url("./icomoon.woff?nn7hff") format("woff"), 7 | url("./icomoon.svg?nn7hff#icomoon") format("svg"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], 13 | [class*=" icon-"] { 14 | /* use !important to prevent issues with browser extensions that change fonts */ 15 | font-family: "icomoon" !important; 16 | speak: none; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | 23 | /* Better Font Rendering =========== */ 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | .icon-wechat:before { 29 | content: "\e900"; 30 | color: #7bb32e; 31 | } 32 | .icon-github:before { 33 | content: "\e902"; 34 | } 35 | .icon-envelop:before { 36 | content: "\e945"; 37 | } 38 | -------------------------------------------------------------------------------- /demo11-css/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | entry: { 5 | app: "./src/app.js" 6 | }, 7 | output: { 8 | publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 9 | path: path.resolve(__dirname, "dist"), // 打包后的输出目录 10 | filename: "[name].bundle.js" 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.css$/, 16 | // 以