├── demo11 ├── src │ ├── app.js │ ├── assets │ │ └── imgs │ │ │ ├── 1.jpg │ │ │ ├── 2.png │ │ │ └── 3.png │ └── css │ │ └── base.css ├── .gitignore ├── index.html ├── package.json └── webpack.config.js ├── demo24 ├── src │ ├── word.js │ ├── index.js │ └── message.js ├── .gitignore └── bundle.js ├── demo21 ├── src │ ├── list.js │ ├── assets │ │ ├── style │ │ │ ├── common.scss │ │ │ └── base.scss │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.png │ │ │ └── 3.png │ │ └── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.css │ │ │ ├── iconfont.svg │ │ │ └── iconfont.js │ ├── vendor │ │ ├── minus.js │ │ ├── sum.js │ │ └── multi.js │ └── app.js ├── .gitignore ├── postcss.config.js ├── .babelrc ├── .browserslistrc ├── build │ ├── webpack.dll.js │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ └── webpack.base.conf.js ├── index.html └── package.json ├── demo22 ├── src │ └── index.js ├── .gitignore ├── loaders │ ├── replaceLoader.js │ └── replaceLoaderAsync.js ├── package.json └── webpack.config.js ├── demo23 ├── src │ └── index.js ├── .gitignore ├── package.json ├── webpack.config.js └── plugins │ └── copyright-webpack-plugin.js ├── demo01 ├── src │ └── index.js ├── .gitignore └── package.json ├── demo02 ├── src │ └── index.js ├── .gitignore └── package.json ├── demo12 ├── src │ ├── app.js │ └── assets │ │ └── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.css │ │ ├── iconfont.svg │ │ └── iconfont.js ├── .gitignore ├── package.json ├── index.html └── webpack.config.js ├── demo03 ├── .gitignore ├── vendor │ ├── sum.js │ ├── minus.js │ └── multi.js ├── index.html ├── app.js ├── package.json └── webpack.config.js ├── demo04 ├── .gitignore ├── .browserslistrc ├── .babelrc ├── app.js ├── index.html ├── package.json └── webpack.config.js ├── demo05 ├── .gitignore ├── src │ ├── common.js │ ├── a.js │ ├── b.js │ └── index.js ├── package.json ├── index.html └── webpack.config.js ├── demo06 ├── .gitignore ├── src │ ├── index.js │ └── click.js ├── package.json ├── index.html └── webpack.config.js ├── demo07 ├── .gitignore ├── src │ ├── common.js │ ├── subPageA.js │ ├── subPageB.js │ └── page.js ├── index.html ├── package.json └── webpack.config.js ├── demo08 ├── .gitignore ├── src │ ├── app.js │ ├── css │ │ └── base.css │ └── scss │ │ └── main.scss ├── postcss.config.js ├── index.html ├── package.json └── webpack.config.js ├── demo09 ├── .gitignore ├── src │ ├── app.js │ └── vendor │ │ └── util.js ├── index.html ├── package.json └── webpack.config.js ├── demo10 ├── .gitignore ├── src │ ├── app.js │ └── css │ │ └── base.css ├── index.html ├── package.json └── webpack.config.js ├── demo13 ├── .gitignore ├── src │ └── app.js ├── index.html ├── package.json └── webpack.config.js ├── demo14 ├── .gitignore ├── src │ ├── vendor │ │ ├── minus.js │ │ ├── sum.js │ │ └── multi.js │ └── app.js ├── index.html ├── package.json └── webpack.config.js ├── demo15 ├── .gitignore ├── src │ ├── assets │ │ ├── style │ │ │ ├── common.scss │ │ │ └── base.scss │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.png │ │ │ └── 3.png │ │ └── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.css │ │ │ ├── iconfont.svg │ │ │ └── iconfont.js │ ├── vendor │ │ ├── minus.js │ │ ├── sum.js │ │ └── multi.js │ └── app.js ├── postcss.config.js ├── .babelrc ├── .browserslistrc ├── index.html ├── package.json └── build │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ └── webpack.base.conf.js ├── demo16 ├── .gitignore ├── src │ ├── string.js │ ├── index.js │ └── math.js ├── webpack.config.js └── package.json ├── demo17 ├── .gitignore ├── src │ ├── assets │ │ ├── style │ │ │ ├── common.scss │ │ │ └── base.scss │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.png │ │ │ └── 3.png │ │ └── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.css │ │ │ ├── iconfont.svg │ │ │ └── iconfont.js │ ├── vendor │ │ ├── minus.js │ │ ├── sum.js │ │ └── multi.js │ └── app.js ├── postcss.config.js ├── .babelrc ├── .browserslistrc ├── index.html ├── package.json └── build │ ├── webpack.dev.conf.js │ ├── webpack.base.conf.js │ └── webpack.prod.conf.js ├── demo18 ├── .gitignore ├── tsconfig.json ├── src │ └── index.ts ├── webpack.config.js └── package.json ├── demo19 ├── .gitignore ├── src │ └── index.js ├── .eslintrc.js ├── package.json └── webpack.config.js ├── demo20 ├── src │ ├── assets │ │ ├── style │ │ │ ├── common.scss │ │ │ └── base.scss │ │ ├── images │ │ │ ├── 1.jpg │ │ │ ├── 2.png │ │ │ └── 3.png │ │ └── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.css │ │ │ ├── iconfont.svg │ │ │ └── iconfont.js │ ├── vendor │ │ ├── minus.js │ │ ├── sum.js │ │ └── multi.js │ └── app.js ├── .gitignore ├── postcss.config.js ├── .babelrc ├── .browserslistrc ├── build │ ├── webpack.dll.js │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ └── webpack.base.conf.js ├── index.html └── package.json └── README.md /demo11/src/app.js: -------------------------------------------------------------------------------- 1 | import './css/base.css' 2 | -------------------------------------------------------------------------------- /demo24/src/word.js: -------------------------------------------------------------------------------- 1 | export const word = 'hello' -------------------------------------------------------------------------------- /demo21/src/list.js: -------------------------------------------------------------------------------- 1 | console.log('这里是 list 页面') 2 | -------------------------------------------------------------------------------- /demo22/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('hello world') 2 | -------------------------------------------------------------------------------- /demo23/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('hello world') 2 | -------------------------------------------------------------------------------- /demo01/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('测试 webpack 打包 js 文件') 2 | -------------------------------------------------------------------------------- /demo02/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('测试 webpack 打包 js 文件') 2 | -------------------------------------------------------------------------------- /demo12/src/app.js: -------------------------------------------------------------------------------- 1 | import './assets/fonts/iconfont.css' 2 | -------------------------------------------------------------------------------- /demo01/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo02/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo03/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo04/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo05/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo05/src/common.js: -------------------------------------------------------------------------------- 1 | console.log('公共模块') 2 | export default 'common' 3 | -------------------------------------------------------------------------------- /demo06/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo07/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo07/src/common.js: -------------------------------------------------------------------------------- 1 | console.log('公共模块') 2 | export default 'common' 3 | -------------------------------------------------------------------------------- /demo08/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo09/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo10/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo11/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo12/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo13/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo14/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo15/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo16/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo17/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo18/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo19/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | -------------------------------------------------------------------------------- /demo08/src/app.js: -------------------------------------------------------------------------------- 1 | import './css/base.css' 2 | import './scss/main.scss' 3 | -------------------------------------------------------------------------------- /demo15/src/assets/style/common.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /demo17/src/assets/style/common.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /demo19/src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | let a = '12' 3 | -------------------------------------------------------------------------------- /demo20/src/assets/style/common.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /demo21/src/assets/style/common.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /demo03/vendor/sum.js: -------------------------------------------------------------------------------- 1 | export default function(a, b) { 2 | return a + b 3 | } 4 | -------------------------------------------------------------------------------- /demo05/src/a.js: -------------------------------------------------------------------------------- 1 | import './common' 2 | console.log('A') 3 | export default 'A' 4 | -------------------------------------------------------------------------------- /demo05/src/b.js: -------------------------------------------------------------------------------- 1 | import './common' 2 | console.log('B') 3 | export default 'B' 4 | -------------------------------------------------------------------------------- /demo20/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | /dll/ 5 | -------------------------------------------------------------------------------- /demo21/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | /dll/ 5 | -------------------------------------------------------------------------------- /demo22/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | /dll/ 5 | -------------------------------------------------------------------------------- /demo23/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | /dll/ 5 | -------------------------------------------------------------------------------- /demo24/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /package-lock.json 4 | /dll/ 5 | -------------------------------------------------------------------------------- /demo03/vendor/minus.js: -------------------------------------------------------------------------------- 1 | module.exports = function(a, b) { 2 | return a - b 3 | } 4 | -------------------------------------------------------------------------------- /demo24/src/index.js: -------------------------------------------------------------------------------- 1 | import message from './message.js' 2 | 3 | console.log(message) 4 | -------------------------------------------------------------------------------- /demo14/src/vendor/minus.js: -------------------------------------------------------------------------------- 1 | module.exports = function(a, b) { 2 | return a - b 3 | } 4 | -------------------------------------------------------------------------------- /demo15/src/vendor/minus.js: -------------------------------------------------------------------------------- 1 | module.exports = function(a, b) { 2 | return a - b 3 | } 4 | -------------------------------------------------------------------------------- /demo17/src/vendor/minus.js: -------------------------------------------------------------------------------- 1 | module.exports = function(a, b) { 2 | return a - b 3 | } 4 | -------------------------------------------------------------------------------- /demo20/src/vendor/minus.js: -------------------------------------------------------------------------------- 1 | module.exports = function(a, b) { 2 | return a - b 3 | } 4 | -------------------------------------------------------------------------------- /demo21/src/vendor/minus.js: -------------------------------------------------------------------------------- 1 | module.exports = function(a, b) { 2 | return a - b 3 | } 4 | -------------------------------------------------------------------------------- /demo08/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | } 4 | -------------------------------------------------------------------------------- /demo15/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | } 4 | -------------------------------------------------------------------------------- /demo17/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | } 4 | -------------------------------------------------------------------------------- /demo20/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | } 4 | -------------------------------------------------------------------------------- /demo21/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | } 4 | -------------------------------------------------------------------------------- /demo07/src/subPageA.js: -------------------------------------------------------------------------------- 1 | import './common' 2 | console.log('subPageA') 3 | export default 'subPageA' 4 | -------------------------------------------------------------------------------- /demo07/src/subPageB.js: -------------------------------------------------------------------------------- 1 | import './common' 2 | console.log('subPageB') 3 | export default 'subPageB' 4 | -------------------------------------------------------------------------------- /demo09/src/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | import { chunk } from 'lodash-es' 3 | console.log(chunk([1, 2, 3], 2)) 4 | -------------------------------------------------------------------------------- /demo11/src/assets/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo11/src/assets/imgs/1.jpg -------------------------------------------------------------------------------- /demo11/src/assets/imgs/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo11/src/assets/imgs/2.png -------------------------------------------------------------------------------- /demo11/src/assets/imgs/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo11/src/assets/imgs/3.png -------------------------------------------------------------------------------- /demo08/src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | html { 7 | background: red; 8 | } 9 | -------------------------------------------------------------------------------- /demo15/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /demo15/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo15/src/assets/images/1.jpg -------------------------------------------------------------------------------- /demo15/src/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo15/src/assets/images/2.png -------------------------------------------------------------------------------- /demo15/src/assets/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo15/src/assets/images/3.png -------------------------------------------------------------------------------- /demo15/src/vendor/sum.js: -------------------------------------------------------------------------------- 1 | export default function(a, b) { 2 | console.log("I am sum.js"); 3 | return a + b; 4 | } 5 | -------------------------------------------------------------------------------- /demo17/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /demo17/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo17/src/assets/images/1.jpg -------------------------------------------------------------------------------- /demo17/src/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo17/src/assets/images/2.png -------------------------------------------------------------------------------- /demo17/src/assets/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo17/src/assets/images/3.png -------------------------------------------------------------------------------- /demo17/src/vendor/sum.js: -------------------------------------------------------------------------------- 1 | export default function(a, b) { 2 | console.log("I am sum.js"); 3 | return a + b; 4 | } 5 | -------------------------------------------------------------------------------- /demo20/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /demo20/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo20/src/assets/images/1.jpg -------------------------------------------------------------------------------- /demo20/src/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo20/src/assets/images/2.png -------------------------------------------------------------------------------- /demo20/src/assets/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo20/src/assets/images/3.png -------------------------------------------------------------------------------- /demo20/src/vendor/sum.js: -------------------------------------------------------------------------------- 1 | export default function(a, b) { 2 | console.log("I am sum.js"); 3 | return a + b; 4 | } 5 | -------------------------------------------------------------------------------- /demo21/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /demo21/src/assets/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo21/src/assets/images/1.jpg -------------------------------------------------------------------------------- /demo21/src/assets/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo21/src/assets/images/2.png -------------------------------------------------------------------------------- /demo21/src/assets/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo21/src/assets/images/3.png -------------------------------------------------------------------------------- /demo21/src/vendor/sum.js: -------------------------------------------------------------------------------- 1 | export default function(a, b) { 2 | console.log("I am sum.js"); 3 | return a + b; 4 | } 5 | -------------------------------------------------------------------------------- /demo22/loaders/replaceLoader.js: -------------------------------------------------------------------------------- 1 | module.exports = function(source) { 2 | return source.replace('xh', 'world') 3 | } 4 | -------------------------------------------------------------------------------- /demo16/src/string.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash' 2 | 3 | export function join(a, b) { 4 | return _.join([a, b], ' ') 5 | } 6 | -------------------------------------------------------------------------------- /demo12/src/assets/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo12/src/assets/fonts/iconfont.eot -------------------------------------------------------------------------------- /demo12/src/assets/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo12/src/assets/fonts/iconfont.ttf -------------------------------------------------------------------------------- /demo15/src/assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo15/src/assets/font/iconfont.eot -------------------------------------------------------------------------------- /demo15/src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo15/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /demo15/src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo15/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /demo16/src/index.js: -------------------------------------------------------------------------------- 1 | import * as math from './math'; 2 | import * as string from './string'; 3 | 4 | export default { math, string } -------------------------------------------------------------------------------- /demo17/src/assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo17/src/assets/font/iconfont.eot -------------------------------------------------------------------------------- /demo17/src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo17/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /demo17/src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo17/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /demo20/src/assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo20/src/assets/font/iconfont.eot -------------------------------------------------------------------------------- /demo20/src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo20/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /demo20/src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo20/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /demo21/src/assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo21/src/assets/font/iconfont.eot -------------------------------------------------------------------------------- /demo21/src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo21/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /demo21/src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo21/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /demo24/src/message.js: -------------------------------------------------------------------------------- 1 | import { word } from './word.js' 2 | 3 | const message = `say ${word}` 4 | 5 | export default message 6 | -------------------------------------------------------------------------------- /demo12/src/assets/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ITxiaohao/webpack4-learn/HEAD/demo12/src/assets/fonts/iconfont.woff -------------------------------------------------------------------------------- /demo04/.browserslistrc: -------------------------------------------------------------------------------- 1 | # 所支持的浏览器版本 2 | 3 | > 1% # 全球使用情况统计选择的浏览器版本 4 | last 2 version # 每个浏览器的最后两个版本 5 | not ie <= 8 # 排除小于 ie8 及以下的浏览器 6 | -------------------------------------------------------------------------------- /demo15/.browserslistrc: -------------------------------------------------------------------------------- 1 | # 所支持的浏览器版本 2 | 3 | > 1% # 全球使用情况统计选择的浏览器版本 4 | last 2 version # 每个浏览器的最后两个版本 5 | not ie <= 8 # 排除小于 ie8 及以下的浏览器 6 | -------------------------------------------------------------------------------- /demo17/.browserslistrc: -------------------------------------------------------------------------------- 1 | # 所支持的浏览器版本 2 | 3 | > 1% # 全球使用情况统计选择的浏览器版本 4 | last 2 version # 每个浏览器的最后两个版本 5 | not ie <= 8 # 排除小于 ie8 及以下的浏览器 6 | -------------------------------------------------------------------------------- /demo20/.browserslistrc: -------------------------------------------------------------------------------- 1 | # 所支持的浏览器版本 2 | 3 | > 1% # 全球使用情况统计选择的浏览器版本 4 | last 2 version # 每个浏览器的最后两个版本 5 | not ie <= 8 # 排除小于 ie8 及以下的浏览器 6 | -------------------------------------------------------------------------------- /demo21/.browserslistrc: -------------------------------------------------------------------------------- 1 | # 所支持的浏览器版本 2 | 3 | > 1% # 全球使用情况统计选择的浏览器版本 4 | last 2 version # 每个浏览器的最后两个版本 5 | not ie <= 8 # 排除小于 ie8 及以下的浏览器 6 | -------------------------------------------------------------------------------- /demo03/vendor/multi.js: -------------------------------------------------------------------------------- 1 | define(function(require, factory) { 2 | 'use strict' 3 | return function(a, b) { 4 | return a * b 5 | } 6 | }) 7 | -------------------------------------------------------------------------------- /demo14/src/vendor/sum.js: -------------------------------------------------------------------------------- 1 | export default function(a, b) { 2 | console.log('I am sum.js') 3 | return a + b 4 | } 5 | 6 | console.log('修改') 7 | -------------------------------------------------------------------------------- /demo14/src/vendor/multi.js: -------------------------------------------------------------------------------- 1 | define(function(require, factory) { 2 | 'use strict' 3 | return function(a, b) { 4 | return a * b 5 | } 6 | }) 7 | -------------------------------------------------------------------------------- /demo15/src/vendor/multi.js: -------------------------------------------------------------------------------- 1 | define(function(require, factory) { 2 | "use strict"; 3 | return function(a, b) { 4 | return a * b; 5 | }; 6 | }); 7 | -------------------------------------------------------------------------------- /demo17/src/vendor/multi.js: -------------------------------------------------------------------------------- 1 | define(function(require, factory) { 2 | "use strict"; 3 | return function(a, b) { 4 | return a * b; 5 | }; 6 | }); 7 | -------------------------------------------------------------------------------- /demo20/src/vendor/multi.js: -------------------------------------------------------------------------------- 1 | define(function(require, factory) { 2 | "use strict"; 3 | return function(a, b) { 4 | return a * b; 5 | }; 6 | }); 7 | -------------------------------------------------------------------------------- /demo21/src/vendor/multi.js: -------------------------------------------------------------------------------- 1 | define(function(require, factory) { 2 | "use strict"; 3 | return function(a, b) { 4 | return a * b; 5 | }; 6 | }); 7 | -------------------------------------------------------------------------------- /demo13/src/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | $('div').addClass('new') 3 | 4 | jQuery('div').addClass('old') 5 | 6 | // 运行webpack后 7 | // 浏览器打开 index.html, 查看 div 标签的 class 8 | -------------------------------------------------------------------------------- /demo06/src/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('click', () => { 2 | import(/* webpackPrefetch: true */ './click.js').then(({ default: func }) => { 3 | func() 4 | }) 5 | }) 6 | -------------------------------------------------------------------------------- /demo06/src/click.js: -------------------------------------------------------------------------------- 1 | function handleClick() { 2 | const element = document.createElement('div') 3 | element.innerHTML = 'Hello World' 4 | document.body.appendChild(element) 5 | } 6 | 7 | export default handleClick 8 | -------------------------------------------------------------------------------- /demo04/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "usage" 7 | } 8 | ] 9 | ], 10 | "plugins": ["@babel/plugin-transform-runtime"] 11 | } 12 | -------------------------------------------------------------------------------- /demo18/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileerOptions": { 3 | "outDir": "./dist", // 写不写都行 4 | "module": "es6", // 用 es6 模块引入 import 5 | "target": "es5", // 打包成 es5 6 | "allowJs": true // 允许在 ts 中也能引入 js 的文件 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /demo10/src/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | 3 | import base from './css/base.css' 4 | 5 | // 给 app 标签再加一个 div 并且类名为 box 6 | var app = document.getElementById('app') 7 | var div = document.createElement('div') 8 | div.className = 'box' 9 | app.appendChild(div) 10 | -------------------------------------------------------------------------------- /demo09/src/vendor/util.js: -------------------------------------------------------------------------------- 1 | // util.js 2 | export function a() { 3 | return 'this is function "a"' 4 | } 5 | 6 | export function b() { 7 | return 'this is function "b"' 8 | } 9 | 10 | export function c() { 11 | return 'this is function "c"' 12 | } 13 | -------------------------------------------------------------------------------- /demo16/src/math.js: -------------------------------------------------------------------------------- 1 | export function add(a, b) { 2 | return a + b; 3 | } 4 | 5 | export function minus(a, b) { 6 | return a - b; 7 | } 8 | 9 | export function multiply(a, b) { 10 | return a * b; 11 | } 12 | 13 | export function division(a, b) { 14 | return a / b; 15 | } -------------------------------------------------------------------------------- /demo04/app.js: -------------------------------------------------------------------------------- 1 | // 全局引入 2 | // import '@babel/polyfill' 3 | 4 | // 测试 ES6 语法是否通过 babel 转译 5 | const array = [1, 2, 3] 6 | const isES6 = () => console.log(...array) 7 | 8 | isES6() 9 | 10 | const arr = [new Promise(() => {}), new Promise(() => {})] 11 | 12 | arr.map(item => { 13 | console.log(item) 14 | }) 15 | -------------------------------------------------------------------------------- /demo08/src/scss/main.scss: -------------------------------------------------------------------------------- 1 | $bgColor: black !default; 2 | *, 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | html { 8 | background-color: $bgColor; 9 | } 10 | .example { 11 | display: grid; 12 | transition: all 0.5s; 13 | user-select: none; 14 | background: linear-gradient(to bottom, white, black); 15 | } 16 | -------------------------------------------------------------------------------- /demo16/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src/index.js', 6 | externals: 'lodash', 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), 9 | filename: 'library.js', 10 | library: 'root', 11 | libraryTarget: 'umd' 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /demo09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS Tree Shaking 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /demo18/src/index.ts: -------------------------------------------------------------------------------- 1 | import * as _ from 'lodash' 2 | 3 | class Greeter { 4 | greeting: string 5 | constructor(message: string) { 6 | this.greeting = message 7 | } 8 | greet() { 9 | return _.join(['Hello,', ' ', this.greeting], '') 10 | } 11 | } 12 | 13 | let greeter = new Greeter('world') 14 | 15 | alert(greeter.greet()) 16 | -------------------------------------------------------------------------------- /demo05/src/index.js: -------------------------------------------------------------------------------- 1 | // 异步代码 2 | import(/* webpackChunkName: 'a'*/ './a').then(function(a) { 3 | console.log(a) 4 | }) 5 | 6 | import(/* webpackChunkName: 'b'*/ './b').then(function(b) { 7 | console.log(b) 8 | }) 9 | 10 | import(/* webpackChunkName: 'use-lodash'*/ 'lodash').then(function(_) { 11 | console.log(_.join(['1', '2'])) 12 | }) 13 | -------------------------------------------------------------------------------- /demo05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "webpack": "^4.29.6", 9 | "webpack-cli": "^3.2.3" 10 | }, 11 | "dependencies": { 12 | "lodash": "^4.17.11" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /demo06/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "webpack": "^4.29.6", 9 | "webpack-cli": "^3.2.3" 10 | }, 11 | "dependencies": { 12 | "lodash": "^4.17.11" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /demo07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /demo13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 处理第三方 js 库 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /demo22/loaders/replaceLoaderAsync.js: -------------------------------------------------------------------------------- 1 | const loaderUtils = require('loader-utils') 2 | 3 | module.exports = function(source) { 4 | const options = loaderUtils.getOptions(this) 5 | 6 | const callback = this.async() 7 | 8 | setTimeout(() => { 9 | const result = source.replace('world', options.name) 10 | callback(null, result) 11 | }, 1000) 12 | } 13 | -------------------------------------------------------------------------------- /demo15/src/assets/style/base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .img { 8 | width: 200px; 9 | height: 200px; 10 | background-image: url('../images/1.jpg'); 11 | } 12 | 13 | .example { 14 | display: grid; 15 | transition: all 0.5s; 16 | user-select: none; 17 | background: linear-gradient(to bottom, white, black); 18 | } 19 | -------------------------------------------------------------------------------- /demo17/src/assets/style/base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .img { 8 | width: 200px; 9 | height: 200px; 10 | background-image: url('../images/1.jpg'); 11 | } 12 | 13 | .example { 14 | display: grid; 15 | transition: all 0.5s; 16 | user-select: none; 17 | background: linear-gradient(to bottom, white, black); 18 | } 19 | -------------------------------------------------------------------------------- /demo20/src/assets/style/base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .img { 8 | width: 200px; 9 | height: 200px; 10 | background-image: url('../images/1.jpg'); 11 | } 12 | 13 | .example { 14 | display: grid; 15 | transition: all 0.5s; 16 | user-select: none; 17 | background: linear-gradient(to bottom, white, black); 18 | } 19 | -------------------------------------------------------------------------------- /demo21/src/assets/style/base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .img { 8 | width: 200px; 9 | height: 200px; 10 | background-image: url('../images/1.jpg'); 11 | } 12 | 13 | .example { 14 | display: grid; 15 | transition: all 0.5s; 16 | user-select: none; 17 | background: linear-gradient(to bottom, white, black); 18 | } 19 | -------------------------------------------------------------------------------- /demo08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 处理 CSS 文件 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /demo14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack-dev-server 8 | 9 | 10 | 11 | This is Index html 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 代码分割 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo22/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo22", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "loader-utils": "^1.2.3", 14 | "webpack": "^4.29.6", 15 | "webpack-cli": "^3.3.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "html-loader": "^0.5.5", 9 | "html-webpack-plugin": "^3.2.0", 10 | "jquery": "^3.3.1", 11 | "webpack": "^4.29.6", 12 | "webpack-cli": "^3.2.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /demo06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lazy Loading 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo03/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * webpack 支持 ES6、CommonJs 和 AMD 规范 3 | */ 4 | 5 | // ES6 6 | import sum from './vendor/sum' 7 | console.log('sum(1, 2) = ', sum(1, 2)) 8 | 9 | // CommonJs 10 | var minus = require('./vendor/minus') 11 | console.log('minus(1, 2) = ', minus(1, 2)) 12 | 13 | // // AMD 14 | // require(['./vendor/multi'], function(multi) { 15 | // console.log('multi(1, 2) = ', multi(1, 2)) 16 | // }) 17 | -------------------------------------------------------------------------------- /demo01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "webpack": "^4.29.6", 15 | "webpack-cli": "^3.2.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode development", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "webpack": "^4.29.6", 15 | "webpack-cli": "^3.2.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo07/src/page.js: -------------------------------------------------------------------------------- 1 | import(/* webpackChunkName: 'subPageA'*/ './subPageA').then(function(subPageA) { 2 | console.log(subPageA) 3 | }) 4 | 5 | import(/* webpackChunkName: 'subPageB'*/ './subPageB').then(function(subPageB) { 6 | console.log(subPageB) 7 | }) 8 | 9 | import(/* webpackChunkName: 'lodash'*/ 'lodash').then(function(_) { 10 | console.log(_.join(['1', '2'])) 11 | }) 12 | 13 | export default 'page' 14 | -------------------------------------------------------------------------------- /demo10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 处理 CSS 文件 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /demo07/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "html-loader": "^0.5.5", 9 | "html-webpack-plugin": "^3.2.0", 10 | "webpack": "^4.29.6", 11 | "webpack-cli": "^3.2.3" 12 | }, 13 | "dependencies": { 14 | "lodash": "^4.17.11" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /demo18/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src/index.ts', 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.ts?$/, 10 | use: 'ts-loader', 11 | exclude: /node_modules/ 12 | } 13 | ] 14 | }, 15 | output: { 16 | filename: 'bundle.js', 17 | path: path.resolve(__dirname, 'dist') 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo14/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack-dev-server --open", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "html-loader": "^0.5.5", 9 | "html-webpack-plugin": "^3.2.0", 10 | "jquery": "^3.3.1", 11 | "webpack": "^4.29.6", 12 | "webpack-cli": "^3.2.3", 13 | "webpack-dev-server": "^3.2.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo16/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "library-test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "./dist/library.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "xh", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "webpack": "^4.29.6", 14 | "webpack-cli": "^3.3.0" 15 | }, 16 | "dependencies": { 17 | "lodash": "^4.17.11" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo23/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo23", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js", 8 | "build": "webpack" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "webpack": "^4.29.6", 15 | "webpack-cli": "^3.3.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo10/src/css/base.css: -------------------------------------------------------------------------------- 1 | /* base.css */ 2 | html { 3 | background: red; 4 | } 5 | 6 | .box { 7 | height: 200px; 8 | width: 200px; 9 | border-radius: 3px; 10 | background: green; 11 | } 12 | 13 | .box--big { 14 | height: 300px; 15 | width: 300px; 16 | border-radius: 5px; 17 | background: red; 18 | } 19 | 20 | .box-small { 21 | height: 100px; 22 | width: 100px; 23 | border-radius: 2px; 24 | background: yellow; 25 | } 26 | -------------------------------------------------------------------------------- /demo03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode development", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "clean-webpack-plugin": "^2.0.0", 15 | "webpack": "^4.29.6", 16 | "webpack-cli": "^3.2.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /demo19/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "globals": { 8 | "Atomics": "readonly", 9 | "SharedArrayBuffer": "readonly" 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "rules": { 16 | // "no-unused-vars": 0 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /demo23/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: { 7 | main: './src/index.js' 8 | }, 9 | plugins: [ 10 | new CopyrightWebpackPlugin({ 11 | name: 'xh' 12 | }) 13 | ], 14 | output: { 15 | path: path.resolve(__dirname, 'dist'), 16 | filename: '[name].js' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /demo09/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "html-loader": "^0.5.5", 9 | "html-webpack-plugin": "^3.2.0", 10 | "webpack": "^4.29.6", 11 | "webpack-cli": "^3.2.3" 12 | }, 13 | "dependencies": { 14 | "lodash": "^4.17.11", 15 | "lodash-es": "^4.17.11" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "css-loader": "^2.1.0", 9 | "file-loader": "^3.0.1", 10 | "url-loader": "^1.1.2", 11 | "html-loader": "^0.5.5", 12 | "html-webpack-plugin": "^3.2.0", 13 | "mini-css-extract-plugin": "^0.5.0", 14 | "webpack": "^4.29.6", 15 | "webpack-cli": "^3.2.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo19/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo19", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "eslint": "^5.15.3", 14 | "eslint-config-airbnb-base": "^13.1.0", 15 | "eslint-loader": "^2.1.2", 16 | "eslint-plugin-import": "^2.16.0", 17 | "webpack": "^4.29.6", 18 | "webpack-cli": "^3.3.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo18/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo18", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@types/lodash": "^4.14.123", 14 | "ts-loader": "^5.3.3", 15 | "typescript": "^3.3.4000", 16 | "webpack": "^4.29.6", 17 | "webpack-cli": "^3.3.0" 18 | }, 19 | "dependencies": { 20 | "lodash": "^4.17.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /demo03/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: { 7 | app: './app.js' // 需要打包的文件入口 8 | }, 9 | output: { 10 | publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址 11 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 12 | filename: 'bundle.js' // 打包后生产的 js 文件 13 | }, 14 | plugins: [ 15 | new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /demo11/src/css/base.css: -------------------------------------------------------------------------------- 1 | /* base.css */ 2 | *, 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | .box { 8 | height: 400px; 9 | width: 400px; 10 | border: 5px solid #000; 11 | color: #000; 12 | } 13 | .box div { 14 | width: 100px; 15 | height: 100px; 16 | float: left; 17 | } 18 | .box .ani1 { 19 | background: url('./../assets/imgs/1.jpg') no-repeat; 20 | } 21 | .box .ani2 { 22 | background: url('./../assets/imgs/2.png') no-repeat; 23 | } 24 | .box .ani3 { 25 | background: url('./../assets/imgs/3.png') no-repeat; 26 | } 27 | -------------------------------------------------------------------------------- /demo11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 图片处理 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /demo20/build/webpack.dll.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | module.exports = { 5 | mode: 'production', 6 | entry: { 7 | lodash: ['lodash'], 8 | jquery: ['jquery'] 9 | }, 10 | output: { 11 | filename: '[name].dll.js', 12 | path: path.resolve(__dirname, '../dll'), 13 | library: '[name]' 14 | }, 15 | plugins: [ 16 | new webpack.DllPlugin({ 17 | name: '[name]', 18 | path: path.resolve(__dirname, '../dll/[name].manifest.json') // 用这个插件来分析打包后的这个库，把库里的第三方映射关系放在了这个 json 的文件下，这个文件在 dll 目录下 19 | }) 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /demo21/build/webpack.dll.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | module.exports = { 5 | mode: 'production', 6 | entry: { 7 | lodash: ['lodash'], 8 | jquery: ['jquery'] 9 | }, 10 | output: { 11 | filename: '[name].dll.js', 12 | path: path.resolve(__dirname, '../dll'), 13 | library: '[name]' 14 | }, 15 | plugins: [ 16 | new webpack.DllPlugin({ 17 | name: '[name]', 18 | path: path.resolve(__dirname, '../dll/[name].manifest.json') // 用这个插件来分析打包后的这个库，把库里的第三方映射关系放在了这个 json 的文件下，这个文件在 dll 目录下 19 | }) 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /demo10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "css-loader": "^2.1.0", 9 | "glob-all": "^3.1.0", 10 | "html-loader": "^0.5.5", 11 | "html-webpack-plugin": "^3.2.0", 12 | "mini-css-extract-plugin": "^0.5.0", 13 | "optimize-css-assets-webpack-plugin": "^5.0.1", 14 | "purify-css": "^1.2.5", 15 | "purifycss-webpack": "^0.7.0", 16 | "style-loader": "^0.23.1", 17 | "webpack": "^4.29.6", 18 | "webpack-cli": "^3.2.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /demo08/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "autoprefixer": "^9.4.10", 8 | "clean-webpack-plugin": "^2.0.0", 9 | "css-loader": "^2.1.0", 10 | "html-loader": "^0.5.5", 11 | "html-webpack-plugin": "^3.2.0", 12 | "mini-css-extract-plugin": "^0.5.0", 13 | "node-sass": "^4.11.0", 14 | "optimize-css-assets-webpack-plugin": "^5.0.1", 15 | "postcss-loader": "^3.0.0", 16 | "sass-loader": "^7.1.0", 17 | "style-loader": "^0.23.1", 18 | "webpack": "^4.29.6", 19 | "webpack-cli": "^3.2.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /demo11/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack --mode development", 4 | "build": "webpack --mode production" 5 | }, 6 | "devDependencies": { 7 | "clean-webpack-plugin": "^2.0.0", 8 | "css-loader": "^2.1.0", 9 | "file-loader": "^3.0.1", 10 | "html-loader": "^0.5.5", 11 | "html-webpack-plugin": "^3.2.0", 12 | "image-webpack-loader": "^4.6.0", 13 | "mini-css-extract-plugin": "^0.5.0", 14 | "postcss-loader": "^3.0.0", 15 | "postcss-sprites": "^4.2.1", 16 | "style-loader": "^0.23.1", 17 | "url-loader": "^1.1.2", 18 | "webpack": "^4.29.6", 19 | "webpack-cli": "^3.2.3" 20 | }, 21 | "dependencies": {} 22 | } 23 | -------------------------------------------------------------------------------- /demo15/src/app.js: -------------------------------------------------------------------------------- 1 | import '@babel/polyfill' 2 | 3 | import './assets/style/base.scss' 4 | import './assets/style/common.scss' 5 | 6 | import './assets/font/iconfont.css' // 引入字体文件 7 | 8 | import sum from './vendor/sum' 9 | console.log('sum(1, 2) = ', sum(1, 2)) 10 | 11 | var minus = require('./vendor/minus') 12 | console.log('minus(1, 2) = ', minus(1, 2)) 13 | 14 | require(['./vendor/multi'], function(multi) { 15 | console.log('multi(1, 2) = ', multi(1, 2)) 16 | }) 17 | 18 | // 发送跨域请求 19 | $.get( 20 | '/comments/hotflow', 21 | { 22 | id: '4263554020904293', 23 | mid: '4263554020904293', 24 | max_id_type: '0' 25 | }, 26 | function(data) { 27 | console.log(data) 28 | } 29 | ) 30 | -------------------------------------------------------------------------------- /demo14/src/app.js: -------------------------------------------------------------------------------- 1 | import sum from './vendor/sum' 2 | console.log('sum(1, 2) = ', sum(1, 2)) 3 | 4 | var minus = require('./vendor/minus') 5 | console.log('minus(1, 2) = ', minus(1, 2)) 6 | 7 | require(['./vendor/multi'], function(multi) { 8 | console.log('multi(1, 2) = ', multi(1, 2)) 9 | }) 10 | 11 | $.get( 12 | '/comments/hotflow', 13 | { 14 | id: '4263554020904293', 15 | mid: '4263554020904293', 16 | max_id_type: '0' 17 | }, 18 | function(data) { 19 | console.log(data) 20 | } 21 | ) 22 | 23 | if (module.hot) { 24 | // 检测是否有模块热更新 25 | module.hot.accept('./vendor/sum.js', function() { 26 | // 针对被更新的模块, 进行进一步操作 27 | console.log('/vendor/sum.js is changed') 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /demo04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo4", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode development", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/core": "^7.3.4", 15 | "@babel/plugin-transform-runtime": "^7.3.4", 16 | "@babel/preset-env": "^7.3.4", 17 | "babel-loader": "^8.0.5", 18 | "clean-webpack-plugin": "^2.0.0", 19 | "webpack": "^4.29.6", 20 | "webpack-cli": "^3.2.3" 21 | }, 22 | "dependencies": { 23 | "@babel/polyfill": "^7.2.5", 24 | "@babel/runtime": "^7.3.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /demo22/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: { 6 | main: './src/index.js' 7 | }, 8 | resolveLoader: { 9 | modules: ['node_modules', './loaders'] 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /.js/, 15 | use: [ 16 | { 17 | loader: 'replaceLoader.js' 18 | }, 19 | { 20 | loader: 'replaceLoaderAsync.js', 21 | options: { 22 | name: 'xh' 23 | } 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | output: { 30 | path: path.resolve(__dirname, 'dist'), 31 | filename: '[name].js' 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /demo12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 处理字体文件 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /demo20/src/app.js: -------------------------------------------------------------------------------- 1 | import '@babel/polyfill' 2 | 3 | import './assets/style/base.scss' 4 | import './assets/style/common.scss' 5 | 6 | import './assets/font/iconfont.css' // 引入字体文件 7 | 8 | import sum from './vendor/sum' 9 | console.log('sum(1, 2) = ', sum(1, 2)) 10 | 11 | var minus = require('./vendor/minus') 12 | console.log('minus(1, 2) = ', minus(1, 2)) 13 | 14 | require(['./vendor/multi'], function(multi) { 15 | console.log('multi(1, 2) = ', multi(1, 2)) 16 | }) 17 | 18 | // 发送跨域请求 19 | $.get( 20 | '/comments/hotflow', 21 | { 22 | id: '4263554020904293', 23 | mid: '4263554020904293', 24 | max_id_type: '0' 25 | }, 26 | function(data) { 27 | console.log(data) 28 | } 29 | ) 30 | 31 | import _ from 'lodash' 32 | console.log(_.join(['hello', 'world'], '-')) 33 | -------------------------------------------------------------------------------- /demo21/src/app.js: -------------------------------------------------------------------------------- 1 | import '@babel/polyfill' 2 | 3 | import './assets/style/base.scss' 4 | import './assets/style/common.scss' 5 | 6 | import './assets/font/iconfont.css' // 引入字体文件 7 | 8 | import sum from './vendor/sum' 9 | console.log('sum(1, 2) = ', sum(1, 2)) 10 | 11 | var minus = require('./vendor/minus') 12 | console.log('minus(1, 2) = ', minus(1, 2)) 13 | 14 | require(['./vendor/multi'], function(multi) { 15 | console.log('multi(1, 2) = ', multi(1, 2)) 16 | }) 17 | 18 | // 发送跨域请求 19 | $.get( 20 | '/comments/hotflow', 21 | { 22 | id: '4263554020904293', 23 | mid: '4263554020904293', 24 | max_id_type: '0' 25 | }, 26 | function(data) { 27 | console.log(data) 28 | } 29 | ) 30 | 31 | import _ from 'lodash' 32 | console.log(_.join(['hello', 'world'], '-')) 33 | -------------------------------------------------------------------------------- /demo04/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: { 7 | app: './app.js' // 需要打包的文件入口 8 | }, 9 | output: { 10 | publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址 11 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 12 | filename: 'bundle.js' // 打包后生产的 js 文件 13 | }, 14 | plugins: [ 15 | new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。 16 | ], 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.js$/, // 使用正则来匹配 js 文件 21 | exclude: /node_modules/, // 排除依赖包文件夹 22 | use: { 23 | loader: 'babel-loader' // 使用 babel-loader 24 | } 25 | } 26 | ] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo19/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | // eslint-disable-next-line no-undef 3 | const path = require('path') 4 | 5 | module.exports = { 6 | mode: 'production', 7 | entry: { 8 | app: './src/index.js' // 需要打包的文件入口 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.js$/, // 使用正则来匹配 js 文件 14 | exclude: /nodes_modules/, // 排除依赖包文件夹 15 | use: { 16 | loader: 'eslint-loader' // 使用 eslint-loader 17 | } 18 | } 19 | ] 20 | }, 21 | output: { 22 | // eslint-disable-next-line no-undef 23 | publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址 24 | // eslint-disable-next-line no-undef 25 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 26 | filename: 'bundle.js' // 打包后生产的 js 文件 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo23/plugins/copyright-webpack-plugin.js: -------------------------------------------------------------------------------- 1 | class CopyrightWebpackPlugin { 2 | // constructor(options) { 3 | // console.log('插件被使用了') 4 | // console.log('options = ', options) 5 | // } 6 | apply(compiler) { 7 | 8 | // 同步钩子 9 | compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation)=>{ 10 | console.log('compile'); 11 | }) 12 | 13 | // 异步钩子 14 | compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb)=> { 15 | compilation.assets['copyright.txt']= { 16 | source: function() { 17 | return 'copyright by xh'; 18 | }, 19 | size: function() { 20 | return 15; // 字符长度 21 | } 22 | } 23 | console.log('compilation.assets = ',compilation.assets); 24 | cb() 25 | }) 26 | } 27 | } 28 | 29 | module.exports = CopyrightWebpackPlugin 30 | -------------------------------------------------------------------------------- /demo15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 11 |
12 |
webpack4 实战
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /demo17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 11 |
12 |
webpack4 实战
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /demo20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 11 |
12 |
webpack4 实战
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /demo21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 | 11 |
12 |
webpack4 实战
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /demo09/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/app.js' 9 | }, 10 | output: { 11 | publicPath: './', // js 引用的路径或者 CDN 地址 12 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 13 | filename: '[name].bundle.js' // 代码打包后的文件名 14 | }, 15 | plugins: [ 16 | new CleanWebpackPlugin(), 17 | new HtmlWebpackPlugin({ 18 | // 打包输出HTML 19 | title: '自动生成 HTML', 20 | minify: { 21 | // 压缩 HTML 文件 22 | removeComments: true, // 移除 HTML 中的注释 23 | collapseWhitespace: true, // 删除空白符与换行符 24 | minifyCSS: true // 压缩内联 css 25 | }, 26 | filename: 'index.html', // 生成后的文件名 27 | template: 'index.html', // 根据此模版生成 HTML 文件 28 | chunks: ['app'] // entry中的 app 入口才会被打包 29 | }) 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /demo17/src/app.js: -------------------------------------------------------------------------------- 1 | import '@babel/polyfill' 2 | 3 | import './assets/style/base.scss' 4 | import './assets/style/common.scss' 5 | 6 | import './assets/font/iconfont.css' // 引入字体文件 7 | 8 | import sum from './vendor/sum' 9 | console.log('sum(1, 2) = ', sum(1, 2)) 10 | 11 | var minus = require('./vendor/minus') 12 | console.log('minus(1, 2) = ', minus(1, 2)) 13 | 14 | require(['./vendor/multi'], function(multi) { 15 | console.log('multi(1, 2) = ', multi(1, 2)) 16 | }) 17 | 18 | // 发送跨域请求 19 | $.get( 20 | '/comments/hotflow', 21 | { 22 | id: '4263554020904293', 23 | mid: '4263554020904293', 24 | max_id_type: '0' 25 | }, 26 | function(data) { 27 | console.log(data) 28 | } 29 | ) 30 | 31 | // 判断该浏览器支不支持 serviceWorker 32 | if ('serviceWorker' in navigator) { 33 | window.addEventListener('load', () => { 34 | navigator.serviceWorker 35 | .register('/service-worker.js') 36 | .then(registration => { 37 | console.log('service-worker registed') 38 | }) 39 | .catch(error => { 40 | console.log('service-worker registed error') 41 | }) 42 | }) 43 | } 44 | -------------------------------------------------------------------------------- /demo15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack-dev-server --open --config ./build/webpack.dev.conf.js", 4 | "build": "webpack --config ./build/webpack.prod.conf.js" 5 | }, 6 | "devDependencies": { 7 | "@babel/core": "^7.3.4", 8 | "@babel/plugin-transform-runtime": "^7.3.4", 9 | "@babel/preset-env": "^7.3.4", 10 | "autoprefixer": "^9.4.10", 11 | "babel-loader": "^8.0.5", 12 | "clean-webpack-plugin": "^2.0.0", 13 | "css-loader": "^2.1.1", 14 | "file-loader": "^3.0.1", 15 | "html-loader": "^0.5.5", 16 | "html-webpack-plugin": "^3.2.0", 17 | "image-webpack-loader": "^4.6.0", 18 | "mini-css-extract-plugin": "^0.5.0", 19 | "node-sass": "^4.11.0", 20 | "optimize-css-assets-webpack-plugin": "^5.0.1", 21 | "postcss-loader": "^3.0.0", 22 | "sass-loader": "^7.1.0", 23 | "style-loader": "^0.23.1", 24 | "url-loader": "^1.1.2", 25 | "webpack": "^4.29.6", 26 | "webpack-cli": "^3.2.3", 27 | "webpack-dev-server": "^3.2.1", 28 | "webpack-merge": "^4.2.1" 29 | }, 30 | "dependencies": { 31 | "@babel/polyfill": "^7.2.5", 32 | "@babel/runtime": "^7.3.4", 33 | "jquery": "^3.3.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /demo13/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | module.exports = { 8 | entry: { 9 | app: './src/app.js' 10 | }, 11 | output: { 12 | publicPath: './', // js 引用的路径或者 CDN 地址 13 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 14 | filename: '[name].bundle.js', // 代码打包后的文件名 15 | chunkFilename: '[name].js' // 代码拆分后的文件名 16 | }, 17 | resolve: { 18 | alias: { 19 | jQuery$: path.resolve(__dirname, 'src/vendor/jquery.min.js') 20 | } 21 | }, 22 | plugins: [ 23 | new CleanWebpackPlugin(), 24 | new HtmlWebpackPlugin({ 25 | // 打包输出HTML 26 | title: '自动生成 HTML', 27 | minify: { 28 | // 压缩 HTML 文件 29 | removeComments: true, // 移除 HTML 中的注释 30 | collapseWhitespace: true, // 删除空白符与换行符 31 | minifyCSS: true // 压缩内联 css 32 | }, 33 | filename: 'index.html', // 生成后的文件名 34 | template: 'index.html', // 根据此模版生成 HTML 文件 35 | chunks: ['app'] // entry中的 app 入口才会被打包 36 | }), 37 | new webpack.ProvidePlugin({ 38 | $: 'jquery', // npm 39 | jQuery: 'jQuery' // 本地Js文件 40 | }) 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /demo17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "http-server dist", 4 | "dev": "webpack-dev-server --open --config ./build/webpack.dev.conf.js", 5 | "build": "webpack --config ./build/webpack.prod.conf.js" 6 | }, 7 | "devDependencies": { 8 | "@babel/core": "^7.3.4", 9 | "@babel/plugin-transform-runtime": "^7.3.4", 10 | "@babel/preset-env": "^7.3.4", 11 | "autoprefixer": "^9.4.10", 12 | "babel-loader": "^8.0.5", 13 | "clean-webpack-plugin": "^2.0.0", 14 | "css-loader": "^2.1.1", 15 | "file-loader": "^3.0.1", 16 | "html-loader": "^0.5.5", 17 | "html-webpack-plugin": "^3.2.0", 18 | "http-server": "^0.11.1", 19 | "image-webpack-loader": "^4.6.0", 20 | "mini-css-extract-plugin": "^0.5.0", 21 | "node-sass": "^4.11.0", 22 | "optimize-css-assets-webpack-plugin": "^5.0.1", 23 | "postcss-loader": "^3.0.0", 24 | "sass-loader": "^7.1.0", 25 | "style-loader": "^0.23.1", 26 | "url-loader": "^1.1.2", 27 | "webpack": "^4.29.6", 28 | "webpack-cli": "^3.2.3", 29 | "webpack-dev-server": "^3.2.1", 30 | "webpack-merge": "^4.2.1", 31 | "workbox-webpack-plugin": "^4.1.1" 32 | }, 33 | "dependencies": { 34 | "@babel/polyfill": "^7.2.5", 35 | "@babel/runtime": "^7.3.4", 36 | "jquery": "^3.3.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /demo20/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack-dev-server --open --config ./build/webpack.dev.conf.js", 4 | "build": "webpack --config ./build/webpack.prod.conf.js", 5 | "build:dll": "webpack --config ./build/webpack.dll.js" 6 | }, 7 | "devDependencies": { 8 | "@babel/core": "^7.3.4", 9 | "@babel/plugin-transform-runtime": "^7.3.4", 10 | "@babel/preset-env": "^7.3.4", 11 | "autoprefixer": "^9.4.10", 12 | "babel-loader": "^8.0.5", 13 | "clean-webpack-plugin": "^2.0.0", 14 | "css-loader": "^2.1.1", 15 | "file-loader": "^3.0.1", 16 | "html-loader": "^0.5.5", 17 | "html-webpack-plugin": "^3.2.0", 18 | "image-webpack-loader": "^4.6.0", 19 | "mini-css-extract-plugin": "^0.5.0", 20 | "node-sass": "^4.11.0", 21 | "optimize-css-assets-webpack-plugin": "^5.0.1", 22 | "postcss-loader": "^3.0.0", 23 | "sass-loader": "^7.1.0", 24 | "style-loader": "^0.23.1", 25 | "url-loader": "^1.1.2", 26 | "webpack": "^4.29.6", 27 | "webpack-cli": "^3.2.3", 28 | "webpack-dev-server": "^3.2.1", 29 | "webpack-merge": "^4.2.1" 30 | }, 31 | "dependencies": { 32 | "@babel/polyfill": "^7.2.5", 33 | "@babel/runtime": "^7.3.4", 34 | "add-asset-html-webpack-plugin": "^3.1.3", 35 | "jquery": "^3.3.1", 36 | "lodash": "^4.17.11" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /demo21/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "webpack-dev-server --open --config ./build/webpack.dev.conf.js", 4 | "build": "webpack --config ./build/webpack.prod.conf.js", 5 | "build:dll": "webpack --config ./build/webpack.dll.js" 6 | }, 7 | "devDependencies": { 8 | "@babel/core": "^7.3.4", 9 | "@babel/plugin-transform-runtime": "^7.3.4", 10 | "@babel/preset-env": "^7.3.4", 11 | "autoprefixer": "^9.4.10", 12 | "babel-loader": "^8.0.5", 13 | "clean-webpack-plugin": "^2.0.0", 14 | "css-loader": "^2.1.1", 15 | "file-loader": "^3.0.1", 16 | "html-loader": "^0.5.5", 17 | "html-webpack-plugin": "^3.2.0", 18 | "image-webpack-loader": "^4.6.0", 19 | "mini-css-extract-plugin": "^0.5.0", 20 | "node-sass": "^4.11.0", 21 | "optimize-css-assets-webpack-plugin": "^5.0.1", 22 | "postcss-loader": "^3.0.0", 23 | "sass-loader": "^7.1.0", 24 | "style-loader": "^0.23.1", 25 | "url-loader": "^1.1.2", 26 | "webpack": "^4.29.6", 27 | "webpack-cli": "^3.2.3", 28 | "webpack-dev-server": "^3.2.1", 29 | "webpack-merge": "^4.2.1" 30 | }, 31 | "dependencies": { 32 | "@babel/polyfill": "^7.2.5", 33 | "@babel/runtime": "^7.3.4", 34 | "add-asset-html-webpack-plugin": "^3.1.3", 35 | "jquery": "^3.3.1", 36 | "lodash": "^4.17.11" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /demo15/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const merge = require('webpack-merge') 3 | const commonConfig = require('./webpack.base.conf.js') 4 | 5 | const path = require('path') 6 | 7 | const devConfig = { 8 | mode: 'development', 9 | output: { 10 | filename: '[name].js', 11 | chunkFilename: '[name].js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(sa|sc|c)ss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 23 | } 24 | }, 25 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 26 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 27 | ] 28 | } 29 | ] 30 | }, 31 | devtool: 'cheap-module-eval-soure-map', 32 | devServer: { 33 | contentBase: path.join(__dirname, '../dist/'), 34 | port: 8000, 35 | hot: true, 36 | overlay: true, 37 | proxy: { 38 | '/comments': { 39 | target: 'https://m.weibo.cn', 40 | changeOrigin: true, 41 | logLevel: 'debug', 42 | headers: { 43 | Cookie: '' 44 | } 45 | } 46 | }, 47 | historyApiFallback: true 48 | }, 49 | plugins: [ 50 | new webpack.HotModuleReplacementPlugin(), 51 | new webpack.NamedModulesPlugin() 52 | ] 53 | } 54 | 55 | module.exports = merge(commonConfig, devConfig) 56 | -------------------------------------------------------------------------------- /demo17/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const merge = require('webpack-merge') 3 | const commonConfig = require('./webpack.base.conf.js') 4 | 5 | const path = require('path') 6 | 7 | const devConfig = { 8 | mode: 'development', 9 | output: { 10 | filename: '[name].js', 11 | chunkFilename: '[name].js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(sa|sc|c)ss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 23 | } 24 | }, 25 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 26 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 27 | ] 28 | } 29 | ] 30 | }, 31 | devtool: 'cheap-module-eval-soure-map', 32 | devServer: { 33 | contentBase: path.join(__dirname, '../dist/'), 34 | port: 8000, 35 | hot: true, 36 | overlay: true, 37 | proxy: { 38 | '/comments': { 39 | target: 'https://m.weibo.cn', 40 | changeOrigin: true, 41 | logLevel: 'debug', 42 | headers: { 43 | Cookie: '' 44 | } 45 | } 46 | }, 47 | historyApiFallback: true 48 | }, 49 | plugins: [ 50 | new webpack.HotModuleReplacementPlugin(), 51 | new webpack.NamedModulesPlugin() 52 | ] 53 | } 54 | 55 | module.exports = merge(commonConfig, devConfig) 56 | -------------------------------------------------------------------------------- /demo20/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const merge = require('webpack-merge') 3 | const commonConfig = require('./webpack.base.conf.js') 4 | 5 | const path = require('path') 6 | 7 | const devConfig = { 8 | mode: 'development', 9 | output: { 10 | filename: '[name].js', 11 | chunkFilename: '[name].js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(sa|sc|c)ss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 23 | } 24 | }, 25 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 26 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 27 | ] 28 | } 29 | ] 30 | }, 31 | devtool: 'cheap-module-eval-soure-map', 32 | devServer: { 33 | contentBase: path.join(__dirname, '../dist/'), 34 | port: 8000, 35 | hot: true, 36 | overlay: true, 37 | proxy: { 38 | '/comments': { 39 | target: 'https://m.weibo.cn', 40 | changeOrigin: true, 41 | logLevel: 'debug', 42 | headers: { 43 | Cookie: '' 44 | } 45 | } 46 | }, 47 | historyApiFallback: true 48 | }, 49 | plugins: [ 50 | new webpack.HotModuleReplacementPlugin(), 51 | new webpack.NamedModulesPlugin() 52 | ] 53 | } 54 | 55 | module.exports = merge(commonConfig, devConfig) 56 | -------------------------------------------------------------------------------- /demo21/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const merge = require('webpack-merge') 3 | const commonConfig = require('./webpack.base.conf.js') 4 | 5 | const path = require('path') 6 | 7 | const devConfig = { 8 | mode: 'development', 9 | output: { 10 | filename: '[name].js', 11 | chunkFilename: '[name].js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(sa|sc|c)ss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 23 | } 24 | }, 25 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 26 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 27 | ] 28 | } 29 | ] 30 | }, 31 | devtool: 'cheap-module-eval-soure-map', 32 | devServer: { 33 | contentBase: path.join(__dirname, '../dist/'), 34 | port: 8000, 35 | hot: true, 36 | overlay: true, 37 | proxy: { 38 | '/comments': { 39 | target: 'https://m.weibo.cn', 40 | changeOrigin: true, 41 | logLevel: 'debug', 42 | headers: { 43 | Cookie: '' 44 | } 45 | } 46 | }, 47 | historyApiFallback: true 48 | }, 49 | plugins: [ 50 | new webpack.HotModuleReplacementPlugin(), 51 | new webpack.NamedModulesPlugin() 52 | ] 53 | } 54 | 55 | module.exports = merge(commonConfig, devConfig) 56 | -------------------------------------------------------------------------------- /demo05/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: { 7 | main: './src/index.js' 8 | }, 9 | output: { 10 | publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址 11 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 12 | filename: '[name].bundle.js', // 代码打包后的文件名 13 | chunkFilename: '[name].js' // 代码拆分后的文件名 14 | }, 15 | optimization: { 16 | splitChunks: { 17 | chunks: 'all', 18 | minSize: 30000, 19 | maxSize: 0, 20 | minChunks: 1, 21 | maxAsyncRequests: 5, 22 | maxInitialRequests: 3, 23 | automaticNameDelimiter: '~', 24 | name: true, 25 | cacheGroups: { 26 | lodash: { 27 | name: 'lodash', 28 | test: /[\\/]node_modules[\\/]lodash[\\/]/, 29 | priority: 10 30 | }, 31 | commons: { 32 | name: 'commons', 33 | minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb 34 | minChunks: 2, // 最小公用次数 35 | priority: 5, // 优先级 36 | reuseExistingChunk: true // 公共模块必开启 37 | }, 38 | vendors: { 39 | test: /[\\/]node_modules[\\/]/, 40 | priority: -10 41 | }, 42 | default: { 43 | minChunks: 2, 44 | priority: -20, 45 | reuseExistingChunk: true 46 | } 47 | } 48 | } 49 | }, 50 | plugins: [ 51 | new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path 目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /demo06/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: { 7 | main: './src/index.js' 8 | }, 9 | output: { 10 | publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址 11 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 12 | filename: '[name].bundle.js', // 代码打包后的文件名 13 | chunkFilename: '[name].js' // 代码拆分后的文件名 14 | }, 15 | optimization: { 16 | splitChunks: { 17 | chunks: 'all', 18 | minSize: 30000, 19 | maxSize: 0, 20 | minChunks: 1, 21 | maxAsyncRequests: 5, 22 | maxInitialRequests: 3, 23 | automaticNameDelimiter: '~', 24 | name: true, 25 | cacheGroups: { 26 | lodash: { 27 | name: 'lodash', 28 | test: /[\\/]node_modules[\\/]lodash[\\/]/, 29 | priority: 10 30 | }, 31 | commons: { 32 | name: 'commons', 33 | minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb 34 | minChunks: 2, // 最小公用次数 35 | priority: 5, // 优先级 36 | reuseExistingChunk: true // 公共模块必开启 37 | }, 38 | vendors: { 39 | test: /[\\/]node_modules[\\/]/, 40 | priority: -10 41 | }, 42 | default: { 43 | minChunks: 2, 44 | priority: -20, 45 | reuseExistingChunk: true 46 | } 47 | } 48 | } 49 | }, 50 | plugins: [ 51 | new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path 目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 项目说明 2 | 3 | 此项目总共 24 小节，前 15 节基于 [Webpack4 渐进式教程](https://xin-tan.com/passages/2018-07-29-webpack-demos-introduction/) 为基础，加上自己的实践和理解得出，感谢 **[心谭](https://xin-tan.com/)** 😄 4 | 5 | 在 [Webpack4 渐进式教程](https://xin-tan.com/passages/2018-07-29-webpack-demos-introduction/) 的基础上升级： 6 | 7 | - 使用 **babel7** 8 | - 配置 **.browserslistrc** 文件 9 | - 使用 **mini-css-extract-plugin** 替代 **extract-text-webpack-plugin** 10 | - 使用 **optimize-css-assets-webpack-plugin** 压缩 **css** 11 | - 使用 **postcss** 为 **css** 加上各个浏览器前缀 12 | - 使用 **image-webpack-loader** 处理图片 13 | 14 | 随后的章节以 **mooc** 网 [手把手带你掌握新版 Webpack4.0](https://coding.imooc.com/class/316.html) 整理的学习笔记，感谢 **DellLee** 老师 😄 15 | 16 | 目录： 17 | 18 | 1. 搭建项目并打包 JS 文件 19 | 2. 生产和开发模式 20 | 3. 覆盖默认 entry/output 21 | 4. 用 Babel 7 转译 ES6 22 | 5. Code Splitting 23 | 6. Lazy Loading、Prefetching 24 | 7. 自动生成 HTML 文件 25 | 8. 处理 CSS/SCSS 文件 26 | 9. JS Tree Shaking 27 | 10. CSS Tree Shaking 28 | 11. 图片处理汇总 29 | 12. 字体文件处理 30 | 13. 处理第三方 js 库 31 | 14. 开发模式与 webpack-dev-server 32 | 15. 开发模式和生产模式・实战 33 | 16. 打包自定义函数库 34 | 17. PWA 配置 35 | 18. TypeScript 配置 36 | 19. Eslint 配置 37 | 20. 使用 DLLPlugin 加快打包速度 38 | 21. 多页面打包配置 39 | 22. 编写 loader 40 | 23. 编写 plugin 41 | 24. 编写 Bundle 42 | 43 | 环境如下： 44 | 45 | ```md 46 | OS: 「win10」 47 | node: 「10.5.0」 48 | npm: 「6.1.0」 49 | webpack: 「4.29.6」 50 | webpack-cli: 「3.2.3」 51 | ``` 52 | 53 | 每一个章节对应一个 demo 👉 [配套的文档地址](https://itxiaohao.github.io/passages/webpack4-learn-introduction/) 54 | 55 | 有错误请提 **issue** 56 | 57 | **觉得有帮助的小伙伴不妨点个 star~** 58 | 59 | # 关于我 60 | 61 | - [个人博客](https://itxiaohao.github.io/) 62 | - Email: **281885961@qq.com** 63 | -------------------------------------------------------------------------------- /demo07/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入插件 5 | 6 | module.exports = { 7 | entry: { 8 | page: './src/page.js' 9 | }, 10 | output: { 11 | publicPath: './', // js 引用的路径或者 CDN 地址 12 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 13 | filename: '[name].bundle.js', // 代码打包后的文件名 14 | chunkFilename: '[name].js' // 代码拆分后的文件名 15 | }, 16 | plugins: [ 17 | new CleanWebpackPlugin(), // 默认情况下，此插件将删除 webpack output.path 目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。 18 | new HtmlWebpackPlugin({ 19 | // 打包输出HTML 20 | title: '自动生成 HTML', 21 | minify: { 22 | // 压缩 HTML 文件 23 | removeComments: true, // 移除 HTML 中的注释 24 | collapseWhitespace: true, // 删除空白符与换行符 25 | minifyCSS: true // 压缩内联 css 26 | }, 27 | filename: 'index.html', // 生成后的文件名 28 | template: 'index.html', // 根据此模版生成 HTML 文件 29 | chunks: ['page'] // entry中的 page 入口才会被打包 30 | }) 31 | ], 32 | optimization: { 33 | splitChunks: { 34 | chunks: 'all', 35 | cacheGroups: { 36 | lodash: { 37 | name: 'chunk-lodash', // 单独将 lodash 拆包 38 | priority: 10, // 优先级要大于 commons 不然会被打包进 commons 39 | test: /[\\/]node_modules[\\/]lodash[\\/]/ 40 | }, 41 | commons: { 42 | name: 'chunk-commons', 43 | minSize: 1, //表示在压缩前的最小模块大小,默认值是 30kb 44 | minChunks: 2, // 最小公用次数 45 | priority: 5, // 优先级 46 | reuseExistingChunk: true // 公共模块必开启 47 | } 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /demo10/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 7 | 8 | const PurifyCSS = require('purifycss-webpack') 9 | const glob = require('glob-all') 10 | 11 | module.exports = { 12 | entry: { 13 | app: './src/app.js' 14 | }, 15 | output: { 16 | publicPath: './', // js 引用的路径或者 CDN 地址 17 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 18 | filename: '[name].bundle.js', // 代码打包后的文件名 19 | chunkFilename: '[name].js' // 代码拆分后的文件名 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.css$/, // 针对 .scss 或者 .css 后缀的文件设置 loader 25 | use: [ 26 | { 27 | loader: MiniCssExtractPlugin.loader 28 | }, 29 | 'css-loader' 30 | ] 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new CleanWebpackPlugin(), 36 | new HtmlWebpackPlugin({ 37 | // 打包输出HTML 38 | title: '自动生成 HTML', 39 | minify: { 40 | // 压缩 HTML 文件 41 | removeComments: true, // 移除 HTML 中的注释 42 | collapseWhitespace: true, // 删除空白符与换行符 43 | minifyCSS: true // 压缩内联 css 44 | }, 45 | filename: 'index.html', // 生成后的文件名 46 | template: 'index.html', // 根据此模版生成 HTML 文件 47 | chunks: ['app'] // entry中的 app 入口才会被打包 48 | }), 49 | new MiniCssExtractPlugin({ 50 | filename: '[name].css', 51 | chunkFilename: '[id].css' 52 | }), 53 | // 清除无用 css 54 | new PurifyCSS({ 55 | paths: glob.sync([ 56 | // 要做 CSS Tree Shaking 的路径文件 57 | path.resolve(__dirname, './*.html'), // 请注意，我们同样需要对 html 文件进行 tree shaking 58 | path.resolve(__dirname, './src/*.js') 59 | ]) 60 | }) 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /demo12/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 7 | 8 | module.exports = { 9 | entry: { 10 | app: './src/app.js' 11 | }, 12 | output: { 13 | publicPath: './', // js 引用的路径或者 CDN 地址 14 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 15 | filename: '[name].bundle.js', // 代码打包后的文件名 16 | chunkFilename: '[name].js' // 代码拆分后的文件名 17 | }, 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.css$/, 22 | use: [ 23 | { 24 | loader: MiniCssExtractPlugin.loader 25 | }, 26 | 'css-loader' 27 | ] 28 | }, 29 | { 30 | test: /\.(eot|woff2?|ttf|svg)$/, 31 | use: [ 32 | { 33 | loader: 'url-loader', 34 | options: { 35 | name: '[name]-[hash:5].min.[ext]', 36 | limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file 37 | publicPath: 'fonts/', 38 | outputPath: 'fonts/' 39 | } 40 | } 41 | ] 42 | } 43 | ] 44 | }, 45 | plugins: [ 46 | new CleanWebpackPlugin(), 47 | new HtmlWebpackPlugin({ 48 | // 打包输出HTML 49 | title: '自动生成 HTML', 50 | minify: { 51 | // 压缩 HTML 文件 52 | removeComments: true, // 移除 HTML 中的注释 53 | collapseWhitespace: true, // 删除空白符与换行符 54 | minifyCSS: true // 压缩内联 css 55 | }, 56 | filename: 'index.html', // 生成后的文件名 57 | template: 'index.html', // 根据此模版生成 HTML 文件 58 | chunks: ['app'] // entry中的 app 入口才会被打包 59 | }), 60 | new MiniCssExtractPlugin({ 61 | filename: '[name].css', 62 | chunkFilename: '[id].css' 63 | }) 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /demo14/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | module.exports = { 8 | entry: { 9 | app: './src/app.js' 10 | }, 11 | output: { 12 | publicPath: '/', // js 引用的路径或者 CDN 地址 13 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 14 | filename: '[name].bundle.js', // 代码打包后的文件名 15 | chunkFilename: '[name].js' // 代码拆分后的文件名 16 | }, 17 | mode: 'development', // 开发模式 18 | devtool: 'source-map', // 开启调试 19 | devServer: { 20 | contentBase: path.join(__dirname, 'dist'), 21 | port: 8000, // 本地服务器端口号 22 | hot: true, // 热重载 23 | overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架 24 | proxy: { 25 | // 跨域代理转发 26 | '/comments': { 27 | target: 'https://m.weibo.cn', 28 | changeOrigin: true, 29 | logLevel: 'debug', 30 | headers: { 31 | Cookie: '' 32 | } 33 | } 34 | }, 35 | historyApiFallback: { 36 | // HTML5 history模式 37 | rewrites: [{ from: /.*/, to: '/index.html' }] 38 | } 39 | }, 40 | plugins: [ 41 | new CleanWebpackPlugin(), 42 | new HtmlWebpackPlugin({ 43 | // 打包输出HTML 44 | title: '自动生成 HTML', 45 | minify: { 46 | // 压缩 HTML 文件 47 | removeComments: true, // 移除 HTML 中的注释 48 | collapseWhitespace: true, // 删除空白符与换行符 49 | minifyCSS: true // 压缩内联 css 50 | }, 51 | filename: 'index.html', // 生成后的文件名 52 | template: 'index.html', // 根据此模版生成 HTML 文件 53 | chunks: ['app'] // entry中的 app 入口才会被打包 54 | }), 55 | new webpack.HotModuleReplacementPlugin(), // 热部署模块 56 | new webpack.NamedModulesPlugin(), 57 | new webpack.ProvidePlugin({ 58 | $: 'jquery', // npm 59 | jQuery: 'jQuery' // 本地Js文件 60 | }) 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /demo08/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 7 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css 8 | 9 | module.exports = { 10 | entry: { 11 | app: './src/app.js' 12 | }, 13 | output: { 14 | publicPath: './', // js 引用的路径或者 CDN 地址 15 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 16 | filename: '[name].bundle.js', // 代码打包后的文件名 17 | chunkFilename: '[name].js' // 代码拆分后的文件名 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.(sa|sc|c)ss$/, // 针对 .sass .scss 或者 .css 后缀的文件设置 loader 23 | use: [ 24 | { 25 | loader: MiniCssExtractPlugin.loader 26 | }, 27 | 'css-loader', 28 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 29 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 30 | ] 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new CleanWebpackPlugin(), 36 | new HtmlWebpackPlugin({ 37 | // 打包输出HTML 38 | title: '自动生成 HTML', 39 | minify: { 40 | // 压缩 HTML 文件 41 | removeComments: true, // 移除 HTML 中的注释 42 | collapseWhitespace: true, // 删除空白符与换行符 43 | minifyCSS: true // 压缩内联 css 44 | }, 45 | filename: 'index.html', // 生成后的文件名 46 | template: 'index.html', // 根据此模版生成 HTML 文件 47 | chunks: ['app'] // entry中的 app 入口才会被打包 48 | }), 49 | new MiniCssExtractPlugin({ 50 | filename: '[name].css', 51 | chunkFilename: '[id].css' 52 | }), 53 | new OptimizeCssAssetsPlugin({ 54 | assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g 55 | cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano 56 | cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{} 57 | canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true 58 | }) 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /demo15/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const commonConfig = require('./webpack.base.conf.js') 3 | 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css 6 | 7 | const prodConfig = { 8 | mode: 'production', 9 | output: { 10 | filename: '[name].[contenthash].js', 11 | chunkFilename: '[name].[contenthash].js' 12 | }, 13 | devtool: 'cheap-module-source-map', 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.(sa|sc|c)ss$/, 18 | use: [ 19 | { 20 | loader: MiniCssExtractPlugin.loader 21 | }, 22 | { 23 | loader: 'css-loader', 24 | options: { 25 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 26 | } 27 | }, 28 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 29 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 30 | ] 31 | } 32 | ] 33 | }, 34 | optimization: { 35 | splitChunks: { 36 | chunks: 'all', 37 | cacheGroups: { 38 | jquery: { 39 | name: 'jquery', // 单独将 jquery 拆包 40 | priority: 15, 41 | test: /[\\/]node_modules[\\/]jquery[\\/]/ 42 | }, 43 | vendors: { 44 | test: /[\\/]node_modules[\\/]/, 45 | name: 'vendors' 46 | } 47 | } 48 | } 49 | }, 50 | plugins: [ 51 | new MiniCssExtractPlugin({ 52 | filename: '[name]-[contenthash].css', 53 | chunkFilename: '[id]-[contenthash].css' 54 | }), 55 | // 压缩 css 56 | new OptimizeCssAssetsPlugin({ 57 | assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g 58 | cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano 59 | cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{} 60 | canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true 61 | }) 62 | ] 63 | } 64 | 65 | module.exports = merge(commonConfig, prodConfig) 66 | -------------------------------------------------------------------------------- /demo20/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const commonConfig = require('./webpack.base.conf.js') 3 | 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css 6 | 7 | const prodConfig = { 8 | mode: 'production', 9 | output: { 10 | filename: '[name].[contenthash].js', 11 | chunkFilename: '[name].[contenthash].js' 12 | }, 13 | devtool: 'cheap-module-source-map', 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.(sa|sc|c)ss$/, 18 | use: [ 19 | { 20 | loader: MiniCssExtractPlugin.loader 21 | }, 22 | { 23 | loader: 'css-loader', 24 | options: { 25 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 26 | } 27 | }, 28 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 29 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 30 | ] 31 | } 32 | ] 33 | }, 34 | optimization: { 35 | splitChunks: { 36 | chunks: 'all', 37 | cacheGroups: { 38 | jquery: { 39 | name: 'jquery', // 单独将 jquery 拆包 40 | priority: 15, 41 | test: /[\\/]node_modules[\\/]jquery[\\/]/ 42 | }, 43 | vendors: { 44 | test: /[\\/]node_modules[\\/]/, 45 | name: 'vendors' 46 | } 47 | } 48 | } 49 | }, 50 | plugins: [ 51 | new MiniCssExtractPlugin({ 52 | filename: '[name]-[contenthash].css', 53 | chunkFilename: '[id]-[contenthash].css' 54 | }), 55 | // 压缩 css 56 | new OptimizeCssAssetsPlugin({ 57 | assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g 58 | cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano 59 | cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{} 60 | canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true 61 | }) 62 | ] 63 | } 64 | 65 | module.exports = merge(commonConfig, prodConfig) 66 | -------------------------------------------------------------------------------- /demo21/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const commonConfig = require('./webpack.base.conf.js') 3 | 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css 6 | 7 | const prodConfig = { 8 | mode: 'production', 9 | output: { 10 | filename: '[name].[contenthash].js', 11 | chunkFilename: '[name].[contenthash].js' 12 | }, 13 | devtool: 'cheap-module-source-map', 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.(sa|sc|c)ss$/, 18 | use: [ 19 | { 20 | loader: MiniCssExtractPlugin.loader 21 | }, 22 | { 23 | loader: 'css-loader', 24 | options: { 25 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 26 | } 27 | }, 28 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 29 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 30 | ] 31 | } 32 | ] 33 | }, 34 | optimization: { 35 | splitChunks: { 36 | chunks: 'all', 37 | cacheGroups: { 38 | jquery: { 39 | name: 'jquery', // 单独将 jquery 拆包 40 | priority: 15, 41 | test: /[\\/]node_modules[\\/]jquery[\\/]/ 42 | }, 43 | vendors: { 44 | test: /[\\/]node_modules[\\/]/, 45 | name: 'vendors' 46 | }, 47 | default: { 48 | name: 'code-segment' 49 | } 50 | } 51 | } 52 | }, 53 | plugins: [ 54 | new MiniCssExtractPlugin({ 55 | filename: '[name]-[contenthash].css', 56 | chunkFilename: '[id]-[contenthash].css' 57 | }), 58 | // 压缩 css 59 | new OptimizeCssAssetsPlugin({ 60 | assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g 61 | cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano 62 | cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{} 63 | canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true 64 | }) 65 | ] 66 | } 67 | 68 | module.exports = merge(commonConfig, prodConfig) 69 | -------------------------------------------------------------------------------- /demo15/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/app.js' 9 | }, 10 | output: { 11 | path: path.resolve(__dirname, '..', 'dist') 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: /node_modules/, 18 | use: [ 19 | { 20 | loader: 'babel-loader' 21 | } 22 | ] 23 | }, 24 | { 25 | test: /\.(png|jpg|jpeg|gif)$/, 26 | use: [ 27 | { 28 | loader: 'url-loader', 29 | options: { 30 | name: '[name]-[hash:5].min.[ext]', 31 | limit: 1000, // size <= 1KB 32 | outputPath: 'images/' 33 | } 34 | }, 35 | // img-loader for zip img 36 | { 37 | loader: 'image-webpack-loader', 38 | options: { 39 | // 压缩 jpg/jpeg 图片 40 | mozjpeg: { 41 | progressive: true, 42 | quality: 65 // 压缩率 43 | }, 44 | // 压缩 png 图片 45 | pngquant: { 46 | quality: '65-90', 47 | speed: 4 48 | } 49 | } 50 | } 51 | ] 52 | }, 53 | { 54 | test: /\.(eot|ttf|svg)$/, 55 | use: { 56 | loader: 'url-loader', 57 | options: { 58 | name: '[name]-[hash:5].min.[ext]', 59 | limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file 60 | publicPath: 'fonts/', 61 | outputPath: 'fonts/' 62 | } 63 | } 64 | } 65 | ] 66 | }, 67 | plugins: [ 68 | // 开发环境和生产环境二者均需要的插件 69 | new HtmlWebpackPlugin({ 70 | title: 'webpack4 实战', 71 | filename: 'index.html', 72 | template: path.resolve(__dirname, '..', 'index.html'), 73 | minify: { 74 | collapseWhitespace: true 75 | } 76 | }), 77 | new webpack.ProvidePlugin({ $: 'jquery' }), 78 | new CleanWebpackPlugin() 79 | ], 80 | performance: false 81 | } 82 | -------------------------------------------------------------------------------- /demo17/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './src/app.js' 9 | }, 10 | output: { 11 | path: path.resolve(__dirname, '..', 'dist') 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: /node_modules/, 18 | use: [ 19 | { 20 | loader: 'babel-loader' 21 | } 22 | ] 23 | }, 24 | { 25 | test: /\.(png|jpg|jpeg|gif)$/, 26 | use: [ 27 | { 28 | loader: 'url-loader', 29 | options: { 30 | name: '[name]-[hash:5].min.[ext]', 31 | limit: 1000, // size <= 1KB 32 | outputPath: 'images/' 33 | } 34 | }, 35 | // img-loader for zip img 36 | { 37 | loader: 'image-webpack-loader', 38 | options: { 39 | // 压缩 jpg/jpeg 图片 40 | mozjpeg: { 41 | progressive: true, 42 | quality: 65 // 压缩率 43 | }, 44 | // 压缩 png 图片 45 | pngquant: { 46 | quality: '65-90', 47 | speed: 4 48 | } 49 | } 50 | } 51 | ] 52 | }, 53 | { 54 | test: /\.(eot|ttf|svg)$/, 55 | use: { 56 | loader: 'url-loader', 57 | options: { 58 | name: '[name]-[hash:5].min.[ext]', 59 | limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file 60 | publicPath: 'fonts/', 61 | outputPath: 'fonts/' 62 | } 63 | } 64 | } 65 | ] 66 | }, 67 | plugins: [ 68 | // 开发环境和生产环境二者均需要的插件 69 | new HtmlWebpackPlugin({ 70 | title: 'webpack4 实战', 71 | filename: 'index.html', 72 | template: path.resolve(__dirname, '..', 'index.html'), 73 | minify: { 74 | collapseWhitespace: true 75 | } 76 | }), 77 | new webpack.ProvidePlugin({ $: 'jquery' }), 78 | new CleanWebpackPlugin() 79 | ], 80 | performance: false 81 | } 82 | -------------------------------------------------------------------------------- /demo24/bundle.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const parser = require('@babel/parser') 4 | const traverse = require('@babel/traverse').default 5 | const babel = require('@babel/core') 6 | 7 | // 分析依赖模块 8 | const moduleAnalyser = filename => { 9 | const content = fs.readFileSync(filename, 'utf-8') 10 | const ast = parser.parse(content, { 11 | sourceType: 'module' 12 | }) 13 | const dependencise = {} 14 | traverse(ast, { 15 | ImportDeclaration({ node }) { 16 | const dirname = path.dirname(filename) 17 | const newFile = '.\\' + path.join(dirname, node.source.value) 18 | dependencise[node.source.value] = newFile 19 | } 20 | }) 21 | const { code } = babel.transformFromAst(ast, null, { 22 | presets: ['@babel/preset-env'] 23 | }) 24 | return { 25 | filename, 26 | dependencise, 27 | code 28 | } 29 | } 30 | 31 | // 依赖图谱 32 | const makeDependenciesGraph = entry => { 33 | const entryModule = moduleAnalyser(entry) 34 | const graphArray = [entryModule] 35 | for (let i = 0; i < graphArray.length; i++) { 36 | const item = graphArray[i] 37 | const { dependencise } = item 38 | // 如果入口文件有依赖就去做循环依赖，对每一个依赖做分析 39 | if (dependencise) { 40 | for (const j in dependencise) { 41 | if (dependencise.hasOwnProperty(j)) { 42 | graphArray.push(moduleAnalyser(dependencise[j])) 43 | } 44 | } 45 | } 46 | } 47 | // 创建一个对象，将分析后的结果放入 48 | const graph = {} 49 | graphArray.forEach(item => { 50 | graph[item.filename] = { 51 | dependencise: item.dependencise, 52 | code: item.code 53 | } 54 | }) 55 | return graph 56 | } 57 | 58 | const generateCode = entry => { 59 | // makeDependenciesGraph 返回的是一个对象，需要转换成字符串 60 | const graph = JSON.stringify(makeDependenciesGraph(entry)) 61 | return ` 62 | (function (graph) { 63 | function require(module) { 64 | function localRequire(relativePath) { 65 | return require(graph[module].dependencise[relativePath]) 66 | } 67 | var exports = {}; 68 | (function (require, exports, code) { 69 | eval(code) 70 | })(localRequire, exports, graph[module].code) 71 | return exports; 72 | }; 73 | require('${entry}') 74 | })(${graph}); 75 | ` 76 | } 77 | 78 | const code = generateCode('./src/index.js') 79 | console.log(code) 80 | -------------------------------------------------------------------------------- /demo17/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const commonConfig = require('./webpack.base.conf.js') 3 | 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css 6 | 7 | const WorkboxPlugin = require('workbox-webpack-plugin') // PWA 插件 8 | 9 | const prodConfig = { 10 | mode: 'production', 11 | output: { 12 | filename: '[name].[contenthash].js', 13 | chunkFilename: '[name].[contenthash].js' 14 | }, 15 | devtool: 'cheap-module-source-map', 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.(sa|sc|c)ss$/, 20 | use: [ 21 | { 22 | loader: MiniCssExtractPlugin.loader 23 | }, 24 | { 25 | loader: 'css-loader', 26 | options: { 27 | importLoaders: 2 // 在一个 css 中引入了另一个 css，也会执行之前两个 loader，即 postcss-loader 和 sass-loader 28 | } 29 | }, 30 | 'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀 31 | 'sass-loader' // 使用 sass-loader 将 scss 转为 css 32 | ] 33 | } 34 | ] 35 | }, 36 | optimization: { 37 | splitChunks: { 38 | chunks: 'all', 39 | cacheGroups: { 40 | jquery: { 41 | name: 'jquery', // 单独将 jquery 拆包 42 | priority: 15, 43 | test: /[\\/]node_modules[\\/]jquery[\\/]/ 44 | }, 45 | vendors: { 46 | test: /[\\/]node_modules[\\/]/, 47 | name: 'vendors' 48 | } 49 | } 50 | } 51 | }, 52 | plugins: [ 53 | new MiniCssExtractPlugin({ 54 | filename: '[name]-[contenthash].css', 55 | chunkFilename: '[id]-[contenthash].css' 56 | }), 57 | // 压缩 css 58 | new OptimizeCssAssetsPlugin({ 59 | assetNameRegExp: /\.css$/g, //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g 60 | cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano 61 | cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{} 62 | canPrint: true //一个布尔值，指示插件是否可以将消息打印到控制台，默认为 true 63 | }), 64 | // 配置 PWA 65 | new WorkboxPlugin.GenerateSW({ 66 | clientsClaim: true, 67 | skipWaiting: true 68 | }) 69 | ] 70 | } 71 | 72 | module.exports = merge(commonConfig, prodConfig) 73 | -------------------------------------------------------------------------------- /demo11/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const CleanWebpackPlugin = require('clean-webpack-plugin') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件 7 | 8 | /*********** sprites config ***************/ 9 | let spritesConfig = { 10 | spritePath: './dist/images' 11 | } 12 | /******************************************/ 13 | 14 | module.exports = { 15 | entry: { 16 | app: './src/app.js' 17 | }, 18 | output: { 19 | publicPath: './', // js 引用的路径或者 CDN 地址 20 | path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录 21 | filename: '[name].bundle.js', // 代码打包后的文件名 22 | chunkFilename: '[name].js' // 代码拆分后的文件名 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.css$/, 28 | use: [ 29 | { 30 | loader: MiniCssExtractPlugin.loader 31 | }, 32 | 'css-loader', 33 | /*********** loader for sprites ***************/ 34 | { 35 | loader: 'postcss-loader', 36 | options: { 37 | ident: 'postcss', 38 | plugins: [require('postcss-sprites')(spritesConfig)] 39 | } 40 | } 41 | /*********************************************/ 42 | ] 43 | }, 44 | { 45 | test: /\.(png|jpg|jpeg|gif)$/, 46 | use: [ 47 | { 48 | loader: 'url-loader', 49 | options: { 50 | name: '[name]-[hash:5].min.[ext]', 51 | limit: 1000, // size <= 1KB 52 | outputPath: 'images/' 53 | } 54 | }, 55 | // img-loader for zip img 56 | { 57 | loader: 'image-webpack-loader', 58 | options: { 59 | // 压缩 jpg/jpeg 图片 60 | mozjpeg: { 61 | progressive: true, 62 | quality: 65 // 压缩率 63 | }, 64 | // 压缩 png 图片 65 | pngquant: { 66 | quality: '65-90', 67 | speed: 4 68 | } 69 | } 70 | } 71 | ] 72 | } 73 | ] 74 | }, 75 | plugins: [ 76 | new CleanWebpackPlugin(), 77 | new HtmlWebpackPlugin({ 78 | // 打包输出HTML 79 | title: '自动生成 HTML', 80 | minify: { 81 | // 压缩 HTML 文件 82 | removeComments: true, // 移除 HTML 中的注释 83 | collapseWhitespace: true, // 删除空白符与换行符 84 | minifyCSS: true // 压缩内联 css 85 | }, 86 | filename: 'index.html', // 生成后的文件名 87 | template: 'index.html', // 根据此模版生成 HTML 文件 88 | chunks: ['app'] // entry中的 app 入口才会被打包 89 | }), 90 | new MiniCssExtractPlugin({ 91 | filename: '[name].css', 92 | chunkFilename: '[id].css' 93 | }) 94 | ] 95 | } 96 | -------------------------------------------------------------------------------- /demo20/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | const webpack = require('webpack') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') 6 | const CleanWebpackPlugin = require('clean-webpack-plugin') 7 | 8 | // 存放公共插件 9 | const plugins = [ 10 | // 开发环境和生产环境二者均需要的插件 11 | new HtmlWebpackPlugin({ 12 | title: 'webpack4 实战', 13 | filename: 'index.html', 14 | template: path.resolve(__dirname, '..', 'index.html'), 15 | minify: { 16 | collapseWhitespace: true 17 | } 18 | }), 19 | new CleanWebpackPlugin(), 20 | new webpack.ProvidePlugin({ $: 'jquery' }) 21 | ] 22 | 23 | // 自动引入 dll 中的文件 24 | const files = fs.readdirSync(path.resolve(__dirname, '../dll')) 25 | files.forEach(file => { 26 | if (/.*\.dll.js/.test(file)) { 27 | plugins.push( 28 | new AddAssetHtmlWebpackPlugin({ 29 | filepath: path.resolve(__dirname, '../dll', file) 30 | }) 31 | ) 32 | } 33 | if (/.*\.manifest.json/.test(file)) { 34 | plugins.push( 35 | new webpack.DllReferencePlugin({ 36 | manifest: path.resolve(__dirname, '../dll', file) 37 | }) 38 | ) 39 | } 40 | }) 41 | 42 | module.exports = { 43 | entry: { 44 | app: './src/app.js' 45 | }, 46 | output: { 47 | path: path.resolve(__dirname, '..', 'dist') 48 | }, 49 | module: { 50 | rules: [ 51 | { 52 | test: /\.js$/, 53 | exclude: /node_modules/, 54 | use: [ 55 | { 56 | loader: 'babel-loader' 57 | } 58 | ] 59 | }, 60 | { 61 | test: /\.(png|jpg|jpeg|gif)$/, 62 | use: [ 63 | { 64 | loader: 'url-loader', 65 | options: { 66 | name: '[name]-[hash:5].min.[ext]', 67 | limit: 1000, // size <= 1KB 68 | outputPath: 'images/' 69 | } 70 | }, 71 | // img-loader for zip img 72 | { 73 | loader: 'image-webpack-loader', 74 | options: { 75 | // 压缩 jpg/jpeg 图片 76 | mozjpeg: { 77 | progressive: true, 78 | quality: 65 // 压缩率 79 | }, 80 | // 压缩 png 图片 81 | pngquant: { 82 | quality: '65-90', 83 | speed: 4 84 | } 85 | } 86 | } 87 | ] 88 | }, 89 | { 90 | test: /\.(eot|ttf|svg)$/, 91 | use: { 92 | loader: 'url-loader', 93 | options: { 94 | name: '[name]-[hash:5].min.[ext]', 95 | limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file 96 | publicPath: 'fonts/', 97 | outputPath: 'fonts/' 98 | } 99 | } 100 | } 101 | ] 102 | }, 103 | plugins, 104 | performance: false 105 | } 106 | -------------------------------------------------------------------------------- /demo21/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | const webpack = require('webpack') 4 | const HtmlWebpackPlugin = require('html-webpack-plugin') 5 | const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') 6 | const CleanWebpackPlugin = require('clean-webpack-plugin') 7 | 8 | const makePlugins = configs => { 9 | // 基础插件 10 | const plugins = [ 11 | new CleanWebpackPlugin(), 12 | new webpack.ProvidePlugin({ $: 'jquery' }) 13 | ] 14 | 15 | // 根据 entry 自动生成 HtmlWebpackPlugin 配置，配置多页面 16 | Object.keys(configs.entry).forEach(item => { 17 | plugins.push( 18 | new HtmlWebpackPlugin({ 19 | title: '多页面配置', 20 | template: path.resolve(__dirname, '..', 'index.html'), 21 | filename: `${item}.html`, 22 | chunks: [item, 'vendors', 'code-segment', 'jquery', 'lodash'] 23 | }) 24 | ) 25 | }) 26 | 27 | // 自动引入 dll 中的文件 28 | const files = fs.readdirSync(path.resolve(__dirname, '../dll')) 29 | files.forEach(file => { 30 | if (/.*\.dll.js/.test(file)) { 31 | plugins.push( 32 | new AddAssetHtmlWebpackPlugin({ 33 | filepath: path.resolve(__dirname, '../dll', file) 34 | }) 35 | ) 36 | } 37 | if (/.*\.manifest.json/.test(file)) { 38 | plugins.push( 39 | new webpack.DllReferencePlugin({ 40 | manifest: path.resolve(__dirname, '../dll', file) 41 | }) 42 | ) 43 | } 44 | }) 45 | 46 | return plugins 47 | } 48 | 49 | const configs = { 50 | entry: { 51 | index: './src/app.js', 52 | list: './src/list.js' 53 | }, 54 | output: { 55 | path: path.resolve(__dirname, '..', 'dist') 56 | }, 57 | module: { 58 | rules: [ 59 | { 60 | test: /\.js$/, 61 | exclude: /node_modules/, 62 | use: [ 63 | { 64 | loader: 'babel-loader' 65 | } 66 | ] 67 | }, 68 | { 69 | test: /\.(png|jpg|jpeg|gif)$/, 70 | use: [ 71 | { 72 | loader: 'url-loader', 73 | options: { 74 | name: '[name]-[hash:5].min.[ext]', 75 | limit: 1000, // size <= 1KB 76 | outputPath: 'images/' 77 | } 78 | }, 79 | // img-loader for zip img 80 | { 81 | loader: 'image-webpack-loader', 82 | options: { 83 | // 压缩 jpg/jpeg 图片 84 | mozjpeg: { 85 | progressive: true, 86 | quality: 65 // 压缩率 87 | }, 88 | // 压缩 png 图片 89 | pngquant: { 90 | quality: '65-90', 91 | speed: 4 92 | } 93 | } 94 | } 95 | ] 96 | }, 97 | { 98 | test: /\.(eot|ttf|svg)$/, 99 | use: { 100 | loader: 'url-loader', 101 | options: { 102 | name: '[name]-[hash:5].min.[ext]', 103 | limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file 104 | publicPath: 'fonts/', 105 | outputPath: 'fonts/' 106 | } 107 | } 108 | } 109 | ] 110 | }, 111 | performance: false 112 | } 113 | 114 | makePlugins(configs) 115 | 116 | configs.plugins = makePlugins(configs) 117 | 118 | module.exports = configs 119 | -------------------------------------------------------------------------------- /demo15/src/assets/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1531806455753'); /* IE9*/ 4 | src: url('iconfont.eot?t=1531806455753#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1531806455753') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1531806455753#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-xiazai:before { content: "\e645"; } 19 | 20 | .icon-shoucang:before { content: "\e65f"; } 21 | 22 | .icon-erweima:before { content: "\e7dd"; } 23 | 24 | .icon-xiangshang:before { content: "\e639"; } 25 | 26 | .icon-qiehuanzuhu:before { content: "\e652"; } 27 | 28 | .icon-sort:before { content: "\e60e"; } 29 | 30 | .icon-yonghu:before { content: "\e671"; } 31 | 32 | -------------------------------------------------------------------------------- /demo17/src/assets/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1531806455753'); /* IE9*/ 4 | src: url('iconfont.eot?t=1531806455753#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1531806455753') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1531806455753#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-xiazai:before { content: "\e645"; } 19 | 20 | .icon-shoucang:before { content: "\e65f"; } 21 | 22 | .icon-erweima:before { content: "\e7dd"; } 23 | 24 | .icon-xiangshang:before { content: "\e639"; } 25 | 26 | .icon-qiehuanzuhu:before { content: "\e652"; } 27 | 28 | .icon-sort:before { content: "\e60e"; } 29 | 30 | .icon-yonghu:before { content: "\e671"; } 31 | 32 | -------------------------------------------------------------------------------- /demo20/src/assets/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1531806455753'); /* IE9*/ 4 | src: url('iconfont.eot?t=1531806455753#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1531806455753') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1531806455753#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-xiazai:before { content: "\e645"; } 19 | 20 | .icon-shoucang:before { content: "\e65f"; } 21 | 22 | .icon-erweima:before { content: "\e7dd"; } 23 | 24 | .icon-xiangshang:before { content: "\e639"; } 25 | 26 | .icon-qiehuanzuhu:before { content: "\e652"; } 27 | 28 | .icon-sort:before { content: "\e60e"; } 29 | 30 | .icon-yonghu:before { content: "\e671"; } 31 | 32 | -------------------------------------------------------------------------------- /demo21/src/assets/font/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1531806455753'); /* IE9*/ 4 | src: url('iconfont.eot?t=1531806455753#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1531806455753') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1531806455753#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-xiazai:before { content: "\e645"; } 19 | 20 | .icon-shoucang:before { content: "\e65f"; } 21 | 22 | .icon-erweima:before { content: "\e7dd"; } 23 | 24 | .icon-xiangshang:before { content: "\e639"; } 25 | 26 | .icon-qiehuanzuhu:before { content: "\e652"; } 27 | 28 | .icon-sort:before { content: "\e60e"; } 29 | 30 | .icon-yonghu:before { content: "\e671"; } 31 | 32 | -------------------------------------------------------------------------------- /demo12/src/assets/fonts/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1531806455753'); /* IE9*/ 4 | src: url('iconfont.eot?t=1531806455753#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1531806455753') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1531806455753#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-xiazai:before { content: "\e645"; } 19 | 20 | .icon-shoucang:before { content: "\e65f"; } 21 | 22 | .icon-erweima:before { content: "\e7dd"; } 23 | 24 | .icon-xiangshang:before { content: "\e639"; } 25 | 26 | .icon-qiehuanzuhu:before { content: "\e652"; } 27 | 28 | .icon-sort:before { content: "\e60e"; } 29 | 30 | .icon-yonghu:before { content: "\e671"; } 31 | 32 | -------------------------------------------------------------------------------- /demo12/src/assets/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo15/src/assets/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo17/src/assets/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo20/src/assets/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo21/src/assets/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo12/src/assets/fonts/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /demo15/src/assets/font/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /demo17/src/assets/font/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /demo20/src/assets/font/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /demo21/src/assets/font/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) --------------------------------------------------------------------------------