├── plugin 52 ├── dist │ ├── copyright.txt │ └── main.js ├── src │ └── index.js ├── webpack.config.js ├── package.json └── plugins │ └── copyright-webpack-plugin.js ├── bundler 53 ├── src │ ├── word.js │ ├── index.js │ └── message.js └── bundler.js ├── bundler 54 ├── src │ ├── word.js │ ├── index.js │ └── message.js └── bundler.js ├── bundler 55 ├── src │ ├── word.js │ ├── index.js │ └── message.js └── bundler.js ├── lesson 47 ├── src │ ├── index.js │ └── index.html ├── postcss.config.js ├── .babelrc ├── build │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── webpack.common.js └── package.json ├── make-loader 51 ├── src │ └── index.js ├── loaders │ ├── replaceLoader.js │ └── replaceLoaderAsync.js ├── package.json ├── webpack.config.js └── dist │ └── main.js ├── my-project57 ├── static │ └── index.json ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── main.js │ ├── App.vue │ └── components │ │ └── HelloWorld.vue ├── vue.config.js ├── .gitignore ├── README.md └── package.json ├── readmeimages └── 官网图.jpg ├── lesson 410 ├── postcss.config.js ├── dll │ ├── jquery.manifest.json │ ├── vendors.manifest.json │ └── react.manifest.json ├── src │ ├── index.html │ ├── list.js │ ├── detail.js │ └── index.js ├── .babelrc ├── dist │ ├── index.html │ ├── list.html │ ├── detail.html │ ├── list.467dbe57dede31463b15.js.map │ ├── index.e0dc5336c93b426515ef.js.map │ ├── detail.497e2cecc29819888e63.js.map │ ├── index.e0dc5336c93b426515ef.js │ ├── list.467dbe57dede31463b15.js │ ├── detail.497e2cecc29819888e63.js │ ├── runtime.0e2a2a58c8c9587a0943.js.map │ └── runtime.0e2a2a58c8c9587a0943.js ├── build │ ├── webpack.dll.js │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── webpack.common.js └── package.json ├── lesson 42 ├── postcss.config.js ├── src │ ├── index.html │ └── index.js ├── .babelrc ├── dist │ ├── index.html │ ├── precache-manifest.01e1dbdb1a130df8d533104484f062d5.js │ ├── main.dd286087031892a47534.js.map │ ├── main.dd286087031892a47534.js │ ├── service-worker.js │ ├── runtime.4f3f12f593141a0bf20c.js.map │ └── runtime.4f3f12f593141a0bf20c.js ├── build │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── webpack.common.js └── package.json ├── lesson 44 ├── postcss.config.js ├── src │ ├── index.html │ └── index.js ├── .babelrc ├── package.json └── webpack.config.js ├── lesson 45 ├── postcss.config.js ├── src │ ├── home.js │ ├── list.js │ ├── index.html │ └── index.js ├── .babelrc ├── package.json └── webpack.config.js ├── lesson 46 ├── postcss.config.js ├── src │ ├── home.js │ ├── index.html │ ├── list.js │ └── index.js ├── .babelrc ├── .eslintrc.js ├── package.json └── webpack.config.js ├── lesson 48 ├── postcss.config.js ├── src │ ├── index.html │ ├── a │ │ └── b │ │ │ └── c │ │ │ └── child │ │ │ └── index.jsx │ └── index.js ├── .babelrc ├── build │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── webpack.common.js └── package.json ├── lesson 49 ├── postcss.config.js ├── dll │ ├── jquery.manifest.json │ ├── vendors.manifest.json │ └── react.manifest.json ├── src │ ├── index.html │ └── index.js ├── .babelrc ├── build │ ├── webpack.dll.js │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── webpack.common.js └── package.json ├── my-app56 ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── App.css │ ├── App.js │ ├── logo.svg │ └── serviceWorker.js ├── .gitignore ├── config │ ├── paths.js │ ├── env.js │ ├── webpackDevServer.config.js │ └── webpack.config.js ├── README.md ├── package.json └── scripts │ ├── start.js │ └── build.js ├── library 41 ├── src │ ├── string.js │ ├── index.js │ └── math.js ├── package.json ├── webpack.config.js └── dist │ └── library.js └── type-script ├── tsconfig.json ├── src └── index.tsx ├── webpack.config.js └── package.json /plugin 52/dist/copyright.txt: -------------------------------------------------------------------------------- 1 | copyright by hello -------------------------------------------------------------------------------- /bundler 53/src/word.js: -------------------------------------------------------------------------------- 1 | export const word = 'hello'; -------------------------------------------------------------------------------- /bundler 54/src/word.js: -------------------------------------------------------------------------------- 1 | export const word = 'hello'; -------------------------------------------------------------------------------- /bundler 55/src/word.js: -------------------------------------------------------------------------------- 1 | export const word = 'hello'; -------------------------------------------------------------------------------- /lesson 47/src/index.js: -------------------------------------------------------------------------------- 1 | console.log(this === window); -------------------------------------------------------------------------------- /make-loader 51/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('{{title}}'); -------------------------------------------------------------------------------- /my-project57/static/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "abc": 123 3 | } -------------------------------------------------------------------------------- /plugin 52/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('hello world'); -------------------------------------------------------------------------------- /bundler 53/src/index.js: -------------------------------------------------------------------------------- 1 | import message from './message.js'; 2 | 3 | console.log(message); -------------------------------------------------------------------------------- /bundler 54/src/index.js: -------------------------------------------------------------------------------- 1 | import message from './message.js'; 2 | 3 | console.log(message); -------------------------------------------------------------------------------- /bundler 55/src/index.js: -------------------------------------------------------------------------------- 1 | import message from './message.js'; 2 | 3 | console.log(message); -------------------------------------------------------------------------------- /readmeimages/官网图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wudiufo/WebPack4-study/HEAD/readmeimages/官网图.jpg -------------------------------------------------------------------------------- /my-project57/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /lesson 410/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 42/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 44/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 45/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 46/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 47/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 48/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /lesson 49/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /my-app56/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wudiufo/WebPack4-study/HEAD/my-app56/public/favicon.ico -------------------------------------------------------------------------------- /my-project57/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wudiufo/WebPack4-study/HEAD/my-project57/public/favicon.ico -------------------------------------------------------------------------------- /my-project57/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wudiufo/WebPack4-study/HEAD/my-project57/src/assets/logo.png -------------------------------------------------------------------------------- /library 41/src/string.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | export function join(a, b) { 4 | return _.join([a, b], ' '); 5 | } -------------------------------------------------------------------------------- /bundler 53/src/message.js: -------------------------------------------------------------------------------- 1 | import { word } from './word.js'; 2 | 3 | const message = `say ${word}`; 4 | 5 | export default message; -------------------------------------------------------------------------------- /bundler 54/src/message.js: -------------------------------------------------------------------------------- 1 | import { word } from './word.js'; 2 | 3 | const message = `say ${word}`; 4 | 5 | export default message; -------------------------------------------------------------------------------- /bundler 55/src/message.js: -------------------------------------------------------------------------------- 1 | import { word } from './word.js'; 2 | 3 | const message = `say ${word}`; 4 | 5 | export default message; -------------------------------------------------------------------------------- /library 41/src/index.js: -------------------------------------------------------------------------------- 1 | import * as math from './math'; 2 | import * as string from './string'; 3 | 4 | export default { math, string } -------------------------------------------------------------------------------- /lesson 410/dll/jquery.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"jquery","content":{"./node_modules/jquery/dist/jquery.js":{"id":13,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /lesson 49/dll/jquery.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"jquery","content":{"./node_modules/jquery/dist/jquery.js":{"id":13,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /type-script/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOpitons": { 3 | "outDir": "./dist", 4 | "module": "es6", 5 | "target": "es5", 6 | "allowJs": true, 7 | } 8 | } -------------------------------------------------------------------------------- /my-project57/vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | devServer: { 5 | contentBase: [path.resolve(__dirname, 'static')], 6 | } 7 | } -------------------------------------------------------------------------------- /my-project57/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /lesson 45/src/home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends Component { 4 | render() { 5 | return
HomePage
6 | } 7 | } 8 | 9 | export default Home; -------------------------------------------------------------------------------- /lesson 45/src/list.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class List extends Component { 4 | render() { 5 | return
ListPage
6 | } 7 | } 8 | 9 | export default List; -------------------------------------------------------------------------------- /make-loader 51/loaders/replaceLoader.js: -------------------------------------------------------------------------------- 1 | const loaderUtils = require('loader-utils'); 2 | 3 | module.exports = function(source) { //不能用箭头函数，防止this错乱 4 | return source.replace('lee', 'world'); 5 | } -------------------------------------------------------------------------------- /lesson 410/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 42/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 44/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 45/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 46/src/home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends Component { 4 | render() { 5 | return
HomePage
6 | } 7 | } 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /lesson 46/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 47/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 48/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 49/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 46/src/list.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class List extends Component { 4 | render() { 5 | return
ListPage
; 6 | } 7 | } 8 | 9 | export default List; 10 | -------------------------------------------------------------------------------- /lesson 44/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ] 13 | } -------------------------------------------------------------------------------- /lesson 45/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ] 13 | } -------------------------------------------------------------------------------- /lesson 46/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ] 13 | } -------------------------------------------------------------------------------- /lesson 48/src/a/b/c/child/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export default class Child extends Component { 4 | render() { 5 | return ( 6 |
7 |
This is Child
8 |
9 | ) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lesson 42/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ], 13 | plugins: ["@babel/plugin-syntax-dynamic-import"] 14 | } -------------------------------------------------------------------------------- /lesson 46/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "rules": { 5 | "react/prefer-stateless-function": 0, 6 | "react/jsx-filename-extension": 0 7 | }, 8 | globals: { 9 | document: false 10 | } 11 | }; -------------------------------------------------------------------------------- /lesson 47/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ], 13 | plugins: ["@babel/plugin-syntax-dynamic-import"] 14 | } -------------------------------------------------------------------------------- /lesson 48/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ], 13 | plugins: ["@babel/plugin-syntax-dynamic-import"] 14 | } -------------------------------------------------------------------------------- /lesson 49/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ], 13 | plugins: ["@babel/plugin-syntax-dynamic-import"] 14 | } -------------------------------------------------------------------------------- /lesson 410/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", { 5 | targets: { 6 | chrome: "67", 7 | }, 8 | useBuiltIns: 'usage' 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ], 13 | plugins: ["@babel/plugin-syntax-dynamic-import"] 14 | } -------------------------------------------------------------------------------- /library 41/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 | } -------------------------------------------------------------------------------- /my-app56/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /lesson 49/dll/vendors.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"vendors","content":{"./node_modules/webpack/buildin/global.js":{"id":0,"buildMeta":{"providedExports":true}},"./node_modules/lodash/lodash.js":{"id":4,"buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/module.js":{"id":5,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /lesson 410/dll/vendors.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"vendors","content":{"./node_modules/webpack/buildin/global.js":{"id":0,"buildMeta":{"providedExports":true}},"./node_modules/lodash/lodash.js":{"id":4,"buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/module.js":{"id":5,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /lesson 410/src/list.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 |
This is List Page
9 |
10 | ) 11 | } 12 | } 13 | 14 | ReactDom.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /lesson 410/src/detail.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 |
This is Detail Page
9 |
10 | ) 11 | } 12 | } 13 | 14 | ReactDom.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /lesson 410/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 |
This is Home Page
9 |
10 | ) 11 | } 12 | } 13 | 14 | ReactDom.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /my-project57/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /type-script/src/index.tsx: -------------------------------------------------------------------------------- 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()); -------------------------------------------------------------------------------- /lesson 42/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /make-loader 51/loaders/replaceLoaderAsync.js: -------------------------------------------------------------------------------- 1 | const loaderUtils = require('loader-utils'); 2 | 3 | module.exports = function(source) { 4 | const options = loaderUtils.getOptions(this); 5 | const callback = this.async(); 6 | 7 | setTimeout(() => { 8 | const result = source.replace('dell', options.name); 9 | callback(null, result); 10 | }, 1000); 11 | } -------------------------------------------------------------------------------- /lesson 48/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import Child from 'child'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
This is App
10 | 11 |
12 | ) 13 | } 14 | } 15 | 16 | ReactDom.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /lesson 49/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import _ from 'lodash'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
{_.join(['This', 'is', 'App'], ' ')}
10 |
11 | ) 12 | } 13 | } 14 | 15 | ReactDom.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /type-script/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src/index.tsx', 6 | module: { 7 | rules: [{ 8 | test: /\.tsx?$/, 9 | use: 'ts-loader', 10 | exclude: /node_modules/ 11 | }] 12 | }, 13 | output: { 14 | filename: 'bundle.js', 15 | path: path.resolve(__dirname, 'dist') 16 | } 17 | } -------------------------------------------------------------------------------- /my-app56/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /make-loader 51/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "make-loader", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "haiyang", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "loader-utils": "^1.2.3", 14 | "webpack": "^4.29.0", 15 | "webpack-cli": "^3.2.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /plugin 52/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 | ], 12 | output: { 13 | path: path.resolve(__dirname, 'dist'), 14 | filename: '[name].js' 15 | } 16 | } -------------------------------------------------------------------------------- /lesson 42/dist/precache-manifest.01e1dbdb1a130df8d533104484f062d5.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = [ 2 | { 3 | "revision": "c2af2e33f45df1d4b52d", 4 | "url": "runtime.4f3f12f593141a0bf20c.js" 5 | }, 6 | { 7 | "revision": "ae1ec445b765e9762e7e", 8 | "url": "main.dd286087031892a47534.js" 9 | }, 10 | { 11 | "revision": "09c5b36ba1e9a3d30f19885b4e8fc793", 12 | "url": "index.html" 13 | } 14 | ]; -------------------------------------------------------------------------------- /library 41/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "library-haiyang", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "./dist/library.js", //最终要给别人使用的 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "haiyang", 11 | "license": "MIT", 12 | "dependencies": { 13 | "lodash": "^4.17.11", 14 | "webpack": "^4.27.1", 15 | "webpack-cli": "^3.1.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lesson 42/src/index.js: -------------------------------------------------------------------------------- 1 | console.log('hello, haiyang'); 2 | 3 | if ('serviceWorker' in navigator) { //如果浏览器支持serviceWorker，就执行以下代码 4 | window.addEventListener('load', () => { 5 | navigator.serviceWorker.register('/service-worker.js') 6 | .then(registration => {//注册成功 7 | console.log('service-worker registed'); 8 | }).catch(error => {//没注册成功 9 | console.log('service-worker register error'); 10 | }) 11 | }) 12 | } -------------------------------------------------------------------------------- /my-app56/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /plugin 52/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plugin", 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.0", 15 | "webpack-cli": "^3.2.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /my-app56/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /lesson 44/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import axios from 'axios'; 4 | 5 | class App extends Component { 6 | 7 | componentDidMount() { 8 | axios.get('/react/api/header.json') 9 | .then((res) => { 10 | console.log(res); 11 | }) 12 | } 13 | 14 | render() { 15 | return
Hello World
16 | } 17 | } 18 | 19 | ReactDom.render(, document.getElementById('root')); 20 | -------------------------------------------------------------------------------- /my-app56/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /my-project57/README.md: -------------------------------------------------------------------------------- 1 | # my-project 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /lesson 410/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 410/dist/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /lesson 410/dist/detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html 模版 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /type-script/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "type-script", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "keywords": [], 10 | "author": "haiyang", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@types/lodash": "^4.14.119", 14 | "ts-loader": "^5.3.2", 15 | "typescript": "^3.2.2", 16 | "webpack": "^4.28.3", 17 | "webpack-cli": "^3.2.0" 18 | }, 19 | "dependencies": { 20 | "lodash": "^4.17.11" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lesson 410/build/webpack.dll.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | mode: 'production', 6 | entry: { 7 | vendors: ['lodash'], 8 | react: ['react', 'react-dom'], 9 | jquery: ['jquery'] 10 | }, 11 | output: { 12 | filename: '[name].dll.js', 13 | path: path.resolve(__dirname, '../dll'), 14 | library: '[name]' 15 | }, 16 | plugins: [ 17 | new webpack.DllPlugin({ 18 | name: '[name]', 19 | path: path.resolve(__dirname, '../dll/[name].manifest.json'), 20 | }) 21 | ] 22 | } -------------------------------------------------------------------------------- /lesson 49/build/webpack.dll.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | mode: 'production', 6 | entry: { 7 | vendors: ['lodash'], 8 | react: ['react', 'react-dom'], 9 | jquery: ['jquery'] 10 | }, 11 | output: { 12 | filename: '[name].dll.js', 13 | path: path.resolve(__dirname, '../dll'), 14 | library: '[name]' 15 | }, 16 | plugins: [ 17 | new webpack.DllPlugin({ 18 | name: '[name]', 19 | path: path.resolve(__dirname, '../dll/[name].manifest.json'), 20 | }) 21 | ] 22 | } -------------------------------------------------------------------------------- /lesson 45/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter, Route } from 'react-router-dom'; 3 | import ReactDom from 'react-dom'; 4 | import Home from './home.js'; 5 | import List from './list.js'; 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 | 11 |
12 | 13 | 14 |
15 | 16 | ) 17 | } 18 | } 19 | 20 | ReactDom.render(, document.getElementById('root')); 21 | -------------------------------------------------------------------------------- /lesson 42/dist/main.dd286087031892a47534.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.dd286087031892a47534.js","sources":["webpack:///./src/index.js"],"sourcesContent":["console.log('hello, this is dell');\n\nif ('serviceWorker' in navigator) {\n\twindow.addEventListener('load', () => {\n\t\tnavigator.serviceWorker.register('/service-worker.js')\n\t\t\t.then(registration => {\n\t\t\t\tconsole.log('service-worker registed');\n\t\t\t}).catch(error => {\n\t\t\t\tconsole.log('service-worker register error');\n\t\t\t})\n\t})\n}"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /lesson 46/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter, Route } from 'react-router-dom'; 3 | import ReactDom from 'react-dom'; 4 | import Home from './home'; 5 | import List from './list'; 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 | 11 |
12 | 13 | 14 |
15 | 16 | ); 17 | } 18 | } 19 | 20 | ReactDom.render(, document.getElementById('root')); 21 | -------------------------------------------------------------------------------- /plugin 52/plugins/copyright-webpack-plugin.js: -------------------------------------------------------------------------------- 1 | class CopyrightWebpackPlugin { 2 | 3 | apply(compiler) { 4 | // 同步 5 | compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => { 6 | console.log('compiler'); 7 | }) 8 | // 异步 9 | compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { 10 | debugger; 11 | compilation.assets['copyright.txt']= { 12 | source: function() { 13 | return 'copyright by hello' 14 | }, 15 | size: function() { 16 | return 18; 17 | } 18 | }; 19 | cb(); 20 | }) 21 | } 22 | 23 | } 24 | 25 | module.exports = CopyrightWebpackPlugin; -------------------------------------------------------------------------------- /my-app56/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | } 9 | 10 | .App-header { 11 | background-color: #282c34; 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /lesson 42/dist/main.dd286087031892a47534.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],[ 2 | /* 0 */ 3 | /***/ (function(module, exports) { 4 | 5 | console.log('hello, this is dell'); 6 | 7 | if ('serviceWorker' in navigator) { 8 | window.addEventListener('load', () => { 9 | navigator.serviceWorker.register('/service-worker.js').then(registration => { 10 | console.log('service-worker registed'); 11 | }).catch(error => { 12 | console.log('service-worker register error'); 13 | }); 14 | }); 15 | } 16 | 17 | /***/ }) 18 | ],[[0,1]]]); 19 | //# sourceMappingURL=main.dd286087031892a47534.js.map -------------------------------------------------------------------------------- /my-project57/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /my-project57/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /make-loader 51/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: { //先在 node_modules 中找用到的loader，如果没找到，再在loaders里查找 9 | modules: ['node_modules', './loaders'] 10 | }, 11 | module: { 12 | rules: [{ 13 | test: /\.js/, 14 | use: [//使用自己写的replaceLoader 15 | { 16 | loader: 'replaceLoader', 17 | }, 18 | { 19 | loader: 'replaceLoaderAsync', 20 | options: { 21 | name: 'lee' 22 | } 23 | }, 24 | ] 25 | }] 26 | }, 27 | output: { 28 | path: path.resolve(__dirname, 'dist'), 29 | filename: '[name].js' 30 | } 31 | } -------------------------------------------------------------------------------- /lesson 410/dll/react.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"react","content":{"./node_modules/webpack/buildin/global.js":{"id":0,"buildMeta":{"providedExports":true}},"./node_modules/react/index.js":{"id":1,"buildMeta":{"providedExports":true}},"./node_modules/object-assign/index.js":{"id":2,"buildMeta":{"providedExports":true}},"./node_modules/react/cjs/react.production.min.js":{"id":7,"buildMeta":{"providedExports":true}},"./node_modules/react-dom/index.js":{"id":8,"buildMeta":{"providedExports":true}},"./node_modules/react-dom/cjs/react-dom.production.min.js":{"id":9,"buildMeta":{"providedExports":true}},"./node_modules/scheduler/index.js":{"id":10,"buildMeta":{"providedExports":true}},"./node_modules/scheduler/cjs/scheduler.production.min.js":{"id":11,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /lesson 49/dll/react.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"react","content":{"./node_modules/webpack/buildin/global.js":{"id":0,"buildMeta":{"providedExports":true}},"./node_modules/react/index.js":{"id":1,"buildMeta":{"providedExports":true}},"./node_modules/object-assign/index.js":{"id":2,"buildMeta":{"providedExports":true}},"./node_modules/react/cjs/react.production.min.js":{"id":7,"buildMeta":{"providedExports":true}},"./node_modules/react-dom/index.js":{"id":8,"buildMeta":{"providedExports":true}},"./node_modules/react-dom/cjs/react-dom.production.min.js":{"id":9,"buildMeta":{"providedExports":true}},"./node_modules/scheduler/index.js":{"id":10,"buildMeta":{"providedExports":true}},"./node_modules/scheduler/cjs/scheduler.production.min.js":{"id":11,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /my-app56/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 | logo 11 |

12 | Edit src/App.js and save to reload. 13 |

14 | 20 | Learn React 21 | 22 |
23 |
24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /library 41/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src/index.js', 6 | externals: 'lodash',//解决自己的库里引了lodash，用户又引了lodash的问题, 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), 9 | filename: 'library.js', 10 | library: 'root',//支持通过script标签引入，在全局变量增加一个root变量 11 | libraryTarget: 'umd' //别人用的时候，通过任何形式引入库都可以，比如AMD，CMD，ES MODULE，Commonjs 12 | 13 | // library: 'root',//打包生成全局变量root 14 | // libraryTarget: 'this' //把全局变量root挂载到this上，可以填umd，this，window,global 15 | 16 | // externals: { 17 | // lodash:{ 18 | // root：'_', //是用script标签引入进来的，必须在全局注入一个 _ 变量，下面的library才能正常执行 19 | // commonjs:'lodash',//在用commonjs规范引入是，名字必须是lodash 20 | // } 21 | 22 | // } 23 | } 24 | } -------------------------------------------------------------------------------- /lesson 410/dist/list.467dbe57dede31463b15.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"list.467dbe57dede31463b15.js","sources":["webpack:///delegated ./node_modules/react/index.js from dll-reference react","webpack:///external \"react\"","webpack:///delegated ./node_modules/react-dom/index.js from dll-reference react","webpack:///./src/list.js"],"sourcesContent":["module.exports = (__webpack_require__(1))(1);","module.exports = react;","module.exports = (__webpack_require__(1))(8);","import React, { Component } from 'react';\nimport ReactDom from 'react-dom';\n\nclass App extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t
This is List Page
\n\t\t\t
\n\t\t)\n\t}\n}\n\nReactDom.render(, document.getElementById('root'));"],"mappings":";;;;AAAA;;;;;;ACAA;;;;;;ACAA;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAKA;AACA;AARA;AACA;AASA;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /lesson 410/dist/index.e0dc5336c93b426515ef.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.e0dc5336c93b426515ef.js","sources":["webpack:///delegated ./node_modules/react/index.js from dll-reference react","webpack:///external \"react\"","webpack:///delegated ./node_modules/react-dom/index.js from dll-reference react","webpack:///./src/index.js"],"sourcesContent":["module.exports = (__webpack_require__(1))(1);","module.exports = react;","module.exports = (__webpack_require__(1))(8);","import React, { Component } from 'react';\nimport ReactDom from 'react-dom';\n\nclass App extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t
This is Home Page
\n\t\t\t
\n\t\t)\n\t}\n}\n\nReactDom.render(, document.getElementById('root'));"],"mappings":";;;;AAAA;;;;;;ACAA;;;;;;ACAA;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAKA;AACA;AARA;AACA;AASA;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /lesson 410/dist/detail.497e2cecc29819888e63.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"detail.497e2cecc29819888e63.js","sources":["webpack:///delegated ./node_modules/react/index.js from dll-reference react","webpack:///external \"react\"","webpack:///delegated ./node_modules/react-dom/index.js from dll-reference react","webpack:///./src/detail.js"],"sourcesContent":["module.exports = (__webpack_require__(1))(1);","module.exports = react;","module.exports = (__webpack_require__(1))(8);","import React, { Component } from 'react';\nimport ReactDom from 'react-dom';\n\nclass App extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t
This is Detail Page
\n\t\t\t
\n\t\t)\n\t}\n}\n\nReactDom.render(, document.getElementById('root'));"],"mappings":";;;;AAAA;;;;;;ACAA;;;;;;ACAA;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AAKA;AACA;AARA;AACA;AASA;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /bundler 53/bundler.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 | // 读文件里的内容 10 | const content = fs.readFileSync(filename, 'utf-8'); 11 | // 抽象语法树 12 | const ast = parser.parse(content, { 13 | sourceType: 'module' 14 | }); 15 | const dependencies = {}; 16 | traverse(ast, { 17 | ImportDeclaration({ node }) { 18 | const dirname = path.dirname(filename); 19 | const newFile = './' + path.join(dirname, node.source.value); 20 | dependencies[node.source.value] = newFile; 21 | } 22 | }); 23 | // 转换成可在浏览器上运行的代码 24 | const { code } = babel.transformFromAst(ast, null, { 25 | presets: ["@babel/preset-env"] 26 | }); 27 | return { 28 | filename, 29 | dependencies, 30 | code 31 | } 32 | } 33 | 34 | const moduleInfo = moduleAnalyser('./src/index.js'); 35 | console.log(moduleInfo); 36 | -------------------------------------------------------------------------------- /lesson 410/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const commonConfig = require('./webpack.common.js'); 4 | 5 | const devConfig = { 6 | mode: 'development', 7 | devtool: 'cheap-module-eval-source-map', 8 | devServer: { 9 | contentBase: './dist', 10 | open: true, 11 | port: 8080, 12 | hot: true 13 | }, 14 | module: { 15 | rules: [{ 16 | test: /\.scss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 23 | } 24 | }, 25 | 'postcss-loader', 26 | 'sass-loader' 27 | 28 | ] 29 | }, { 30 | test: /\.css$/, 31 | use: [ 32 | 'style-loader', 33 | 'css-loader', 34 | 'postcss-loader' 35 | ] 36 | }] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin() 40 | ], 41 | output: { 42 | filename: '[name].js', 43 | chunkFilename: '[name].js', 44 | } 45 | } 46 | 47 | module.exports = merge(commonConfig, devConfig); -------------------------------------------------------------------------------- /lesson 42/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const commonConfig = require('./webpack.common.js'); 4 | 5 | const devConfig = { 6 | mode: 'development', 7 | devtool: 'cheap-module-eval-source-map', 8 | devServer: { 9 | contentBase: './dist', 10 | open: true, 11 | port: 8080, 12 | hot: true 13 | }, 14 | module: { 15 | rules: [{ 16 | test: /\.scss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 23 | } 24 | }, 25 | 'postcss-loader', 26 | 'sass-loader', 27 | 28 | ] 29 | }, { 30 | test: /\.css$/, 31 | use: [ 32 | 'style-loader', 33 | 'css-loader', 34 | 'postcss-loader' 35 | ] 36 | }] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin() 40 | ], 41 | output: { 42 | filename: '[name].js', 43 | chunkFilename: '[name].js', 44 | } 45 | } 46 | 47 | module.exports = merge(commonConfig, devConfig); -------------------------------------------------------------------------------- /lesson 47/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const commonConfig = require('./webpack.common.js'); 4 | 5 | const devConfig = { 6 | mode: 'development', 7 | devtool: 'cheap-module-eval-source-map', 8 | devServer: { 9 | contentBase: './dist', 10 | open: true, 11 | port: 8080, 12 | hot: true 13 | }, 14 | module: { 15 | rules: [{ 16 | test: /\.scss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 23 | } 24 | }, 25 | 'postcss-loader', 26 | 'sass-loader' 27 | 28 | ] 29 | }, { 30 | test: /\.css$/, 31 | use: [ 32 | 'style-loader', 33 | 'css-loader', 34 | 'postcss-loader' 35 | ] 36 | }] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin() 40 | ], 41 | output: { 42 | filename: '[name].js', 43 | chunkFilename: '[name].js', 44 | } 45 | } 46 | 47 | module.exports = merge(commonConfig, devConfig); -------------------------------------------------------------------------------- /lesson 48/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const commonConfig = require('./webpack.common.js'); 4 | 5 | const devConfig = { 6 | mode: 'development', 7 | devtool: 'cheap-module-eval-source-map', 8 | devServer: { 9 | contentBase: './dist', 10 | open: true, 11 | port: 8080, 12 | hot: true 13 | }, 14 | module: { 15 | rules: [{ 16 | test: /\.scss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 23 | } 24 | }, 25 | 'postcss-loader', 26 | 'sass-loader' 27 | 28 | ] 29 | }, { 30 | test: /\.css$/, 31 | use: [ 32 | 'style-loader', 33 | 'css-loader', 34 | 'postcss-loader' 35 | ] 36 | }] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin() 40 | ], 41 | output: { 42 | filename: '[name].js', 43 | chunkFilename: '[name].js', 44 | } 45 | } 46 | 47 | module.exports = merge(commonConfig, devConfig); -------------------------------------------------------------------------------- /lesson 49/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const commonConfig = require('./webpack.common.js'); 4 | 5 | const devConfig = { 6 | mode: 'development', 7 | devtool: 'cheap-module-eval-source-map', 8 | devServer: { 9 | contentBase: './dist', 10 | open: true, 11 | port: 8080, 12 | hot: true 13 | }, 14 | module: { 15 | rules: [{ 16 | test: /\.scss$/, 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | importLoaders: 2 23 | } 24 | }, 25 | 'postcss-loader', 26 | 'sass-loader' 27 | 28 | ] 29 | }, { 30 | test: /\.css$/, 31 | use: [ 32 | 'style-loader', 33 | 'css-loader', 34 | 'postcss-loader' 35 | ] 36 | }] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin() 40 | ], 41 | output: { 42 | filename: '[name].js', 43 | chunkFilename: '[name].js', 44 | } 45 | } 46 | 47 | module.exports = merge(commonConfig, devConfig); -------------------------------------------------------------------------------- /lesson 42/dist/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Welcome to your Workbox-powered service worker! 3 | * 4 | * You'll need to register this file in your web app and you should 5 | * disable HTTP caching for this file too. 6 | * See https://goo.gl/nhQhGp 7 | * 8 | * The rest of the code is auto-generated. Please don't update this file 9 | * directly; instead, make changes to your Workbox build configuration 10 | * and re-run your build process. 11 | * See https://goo.gl/2aRDsh 12 | */ 13 | 14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js"); 15 | 16 | importScripts( 17 | "precache-manifest.01e1dbdb1a130df8d533104484f062d5.js" 18 | ); 19 | 20 | workbox.skipWaiting(); 21 | workbox.clientsClaim(); 22 | 23 | /** 24 | * The workboxSW.precacheAndRoute() method efficiently caches and responds to 25 | * requests for URLs in the manifest. 26 | * See https://goo.gl/S9QRab 27 | */ 28 | self.__precacheManifest = [].concat(self.__precacheManifest || []); 29 | workbox.precaching.suppressWarnings(); 30 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); 31 | -------------------------------------------------------------------------------- /my-project57/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.21" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.3.0", 15 | "@vue/cli-plugin-eslint": "^3.3.0", 16 | "@vue/cli-service": "^3.3.0", 17 | "babel-eslint": "^10.0.1", 18 | "eslint": "^5.8.0", 19 | "eslint-plugin-vue": "^5.0.0", 20 | "vue-template-compiler": "^2.5.21" 21 | }, 22 | "eslintConfig": { 23 | "root": true, 24 | "env": { 25 | "node": true 26 | }, 27 | "extends": [ 28 | "plugin:vue/essential", 29 | "eslint:recommended" 30 | ], 31 | "rules": {}, 32 | "parserOptions": { 33 | "parser": "babel-eslint" 34 | } 35 | }, 36 | "postcss": { 37 | "plugins": { 38 | "autoprefixer": {} 39 | } 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not ie <= 8" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /lesson 410/build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 3 | const merge = require('webpack-merge'); 4 | const commonConfig = require('./webpack.common.js'); 5 | 6 | const prodConfig = { 7 | mode: 'production', 8 | devtool: 'cheap-module-source-map', 9 | module: { 10 | rules:[{ 11 | test: /\.scss$/, 12 | use: [ 13 | MiniCssExtractPlugin.loader, 14 | { 15 | loader: 'css-loader', 16 | options: { 17 | importLoaders: 2 18 | } 19 | }, 20 | 'postcss-loader', 21 | 'sass-loader' 22 | 23 | ] 24 | }, { 25 | test: /\.css$/, 26 | use: [ 27 | MiniCssExtractPlugin.loader, 28 | 'css-loader', 29 | 'postcss-loader' 30 | ] 31 | }] 32 | }, 33 | optimization: { 34 | minimizer: [new OptimizeCSSAssetsPlugin({})] 35 | }, 36 | plugins: [ 37 | new MiniCssExtractPlugin({ 38 | filename: '[name].css', 39 | chunkFilename: '[name].chunk.css' 40 | }) 41 | ], 42 | output: { 43 | filename: '[name].[contenthash].js', 44 | chunkFilename: '[name].[contenthash].js' 45 | } 46 | } 47 | 48 | module.exports = merge(commonConfig, prodConfig); -------------------------------------------------------------------------------- /lesson 47/build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 3 | const merge = require('webpack-merge'); 4 | const commonConfig = require('./webpack.common.js'); 5 | 6 | const prodConfig = { 7 | mode: 'production', 8 | devtool: 'cheap-module-source-map', 9 | module: { 10 | rules:[{ 11 | test: /\.scss$/, 12 | use: [ 13 | MiniCssExtractPlugin.loader, 14 | { 15 | loader: 'css-loader', 16 | options: { 17 | importLoaders: 2 18 | } 19 | }, 20 | 'postcss-loader', 21 | 'sass-loader' 22 | 23 | ] 24 | }, { 25 | test: /\.css$/, 26 | use: [ 27 | MiniCssExtractPlugin.loader, 28 | 'css-loader', 29 | 'postcss-loader' 30 | ] 31 | }] 32 | }, 33 | optimization: { 34 | minimizer: [new OptimizeCSSAssetsPlugin({})] 35 | }, 36 | plugins: [ 37 | new MiniCssExtractPlugin({ 38 | filename: '[name].css', 39 | chunkFilename: '[name].chunk.css' 40 | }) 41 | ], 42 | output: { 43 | filename: '[name].[contenthash].js', 44 | chunkFilename: '[name].[contenthash].js' 45 | } 46 | } 47 | 48 | module.exports = merge(commonConfig, prodConfig); -------------------------------------------------------------------------------- /lesson 48/build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 3 | const merge = require('webpack-merge'); 4 | const commonConfig = require('./webpack.common.js'); 5 | 6 | const prodConfig = { 7 | mode: 'production', 8 | devtool: 'cheap-module-source-map', 9 | module: { 10 | rules:[{ 11 | test: /\.scss$/, 12 | use: [ 13 | MiniCssExtractPlugin.loader, 14 | { 15 | loader: 'css-loader', 16 | options: { 17 | importLoaders: 2 18 | } 19 | }, 20 | 'postcss-loader', 21 | 'sass-loader' 22 | 23 | ] 24 | }, { 25 | test: /\.css$/, 26 | use: [ 27 | MiniCssExtractPlugin.loader, 28 | 'css-loader', 29 | 'postcss-loader' 30 | ] 31 | }] 32 | }, 33 | optimization: { 34 | minimizer: [new OptimizeCSSAssetsPlugin({})] 35 | }, 36 | plugins: [ 37 | new MiniCssExtractPlugin({ 38 | filename: '[name].css', 39 | chunkFilename: '[name].chunk.css' 40 | }) 41 | ], 42 | output: { 43 | filename: '[name].[contenthash].js', 44 | chunkFilename: '[name].[contenthash].js' 45 | } 46 | } 47 | 48 | module.exports = merge(commonConfig, prodConfig); -------------------------------------------------------------------------------- /lesson 49/build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 3 | const merge = require('webpack-merge'); 4 | const commonConfig = require('./webpack.common.js'); 5 | 6 | const prodConfig = { 7 | mode: 'production', 8 | devtool: 'cheap-module-source-map', 9 | module: { 10 | rules:[{ 11 | test: /\.scss$/, 12 | use: [ 13 | MiniCssExtractPlugin.loader, 14 | { 15 | loader: 'css-loader', 16 | options: { 17 | importLoaders: 2 18 | } 19 | }, 20 | 'postcss-loader', 21 | 'sass-loader' 22 | 23 | ] 24 | }, { 25 | test: /\.css$/, 26 | use: [ 27 | MiniCssExtractPlugin.loader, 28 | 'css-loader', 29 | 'postcss-loader' 30 | ] 31 | }] 32 | }, 33 | optimization: { 34 | minimizer: [new OptimizeCSSAssetsPlugin({})] 35 | }, 36 | plugins: [ 37 | new MiniCssExtractPlugin({ 38 | filename: '[name].css', 39 | chunkFilename: '[name].chunk.css' 40 | }) 41 | ], 42 | output: { 43 | filename: '[name].[contenthash].js', 44 | chunkFilename: '[name].[contenthash].js' 45 | } 46 | } 47 | 48 | module.exports = merge(commonConfig, prodConfig); -------------------------------------------------------------------------------- /lesson 44/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "haiyang", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.2.0", 13 | "@babel/plugin-transform-runtime": "^7.2.0", 14 | "@babel/preset-env": "^7.2.0", 15 | "@babel/preset-react": "^7.0.0", 16 | "autoprefixer": "^9.3.1", 17 | "axios": "^0.18.0", 18 | "babel-loader": "^8.0.4", 19 | "clean-webpack-plugin": "^1.0.0", 20 | "css-loader": "^1.0.1", 21 | "express": "^4.16.4", 22 | "file-loader": "^2.0.0", 23 | "html-webpack-plugin": "^3.2.0", 24 | "node-sass": "^4.10.0", 25 | "postcss-loader": "^3.0.0", 26 | "sass-loader": "^7.1.0", 27 | "style-loader": "^0.23.1", 28 | "url-loader": "^1.1.2", 29 | "webpack-cli": "^3.1.2", 30 | "webpack-dev-middleware": "^3.4.0", 31 | "webpack-dev-server": "^3.1.10" 32 | }, 33 | "dependencies": { 34 | "@babel/polyfill": "^7.0.0", 35 | "@babel/runtime": "^7.2.0", 36 | "@babel/runtime-corejs2": "^7.2.0", 37 | "react": "^16.6.3", 38 | "react-dom": "^16.6.3", 39 | "webpack": "^4.25.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /lesson 45/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "haiyang", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.2.0", 13 | "@babel/plugin-transform-runtime": "^7.2.0", 14 | "@babel/preset-env": "^7.2.0", 15 | "@babel/preset-react": "^7.0.0", 16 | "autoprefixer": "^9.3.1", 17 | "axios": "^0.18.0", 18 | "babel-loader": "^8.0.4", 19 | "clean-webpack-plugin": "^1.0.0", 20 | "css-loader": "^1.0.1", 21 | "express": "^4.16.4", 22 | "file-loader": "^2.0.0", 23 | "html-webpack-plugin": "^3.2.0", 24 | "node-sass": "^4.10.0", 25 | "postcss-loader": "^3.0.0", 26 | "sass-loader": "^7.1.0", 27 | "style-loader": "^0.23.1", 28 | "url-loader": "^1.1.2", 29 | "webpack-cli": "^3.1.2", 30 | "webpack-dev-middleware": "^3.4.0", 31 | "webpack-dev-server": "^3.1.10" 32 | }, 33 | "dependencies": { 34 | "@babel/polyfill": "^7.0.0", 35 | "@babel/runtime": "^7.2.0", 36 | "@babel/runtime-corejs2": "^7.2.0", 37 | "react": "^16.6.3", 38 | "react-dom": "^16.6.3", 39 | "react-router-dom": "^4.3.1", 40 | "webpack": "^4.25.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /lesson 42/build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 3 | const WorkboxPlugin = require('workbox-webpack-plugin'); 4 | const merge = require('webpack-merge'); 5 | const commonConfig = require('./webpack.common.js'); 6 | 7 | const prodConfig = { 8 | mode: 'production', 9 | devtool: 'cheap-module-source-map', 10 | module: { 11 | rules:[{ 12 | test: /\.scss$/, 13 | use: [ 14 | MiniCssExtractPlugin.loader, 15 | { 16 | loader: 'css-loader', 17 | options: { 18 | importLoaders: 2 19 | } 20 | }, 21 | 'postcss-loader', 22 | 'sass-loader', 23 | 24 | ] 25 | }, { 26 | test: /\.css$/, 27 | use: [ 28 | MiniCssExtractPlugin.loader, 29 | 'css-loader', 30 | 'postcss-loader' 31 | ] 32 | }] 33 | }, 34 | optimization: { 35 | minimizer: [new OptimizeCSSAssetsPlugin({})] 36 | }, 37 | plugins: [ 38 | new MiniCssExtractPlugin({ 39 | filename: '[name].css', 40 | chunkFilename: '[name].chunk.css' 41 | }), 42 | new WorkboxPlugin.GenerateSW({ 43 | clientsClaim: true, 44 | skipWaiting: true 45 | }) 46 | ], 47 | output: { 48 | filename: '[name].[contenthash].js', 49 | chunkFilename: '[name].[contenthash].js' 50 | } 51 | } 52 | 53 | module.exports = merge(commonConfig, prodConfig); -------------------------------------------------------------------------------- /lesson 42/build/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: { 7 | main: './src/index.js', 8 | }, 9 | module: { 10 | rules: [{ 11 | test: /\.js$/, 12 | exclude: /node_modules/, 13 | use: [{ 14 | loader: 'babel-loader' 15 | }] 16 | }, { 17 | test: /\.(jpg|png|gif)$/, 18 | use: { 19 | loader: 'url-loader', 20 | options: { 21 | name: '[name]_[hash].[ext]', 22 | outputPath: 'images/', 23 | limit: 10240 24 | } 25 | } 26 | }, { 27 | test: /\.(eot|ttf|svg)$/, 28 | use: { 29 | loader: 'file-loader' 30 | } 31 | }] 32 | }, 33 | plugins: [ 34 | new HtmlWebpackPlugin({ 35 | template: 'src/index.html' 36 | }), 37 | new CleanWebpackPlugin(['dist'], { 38 | root: path.resolve(__dirname, '../') 39 | }) 40 | ], 41 | optimization: { 42 | runtimeChunk: { 43 | name: 'runtime' 44 | }, 45 | usedExports: true, 46 | splitChunks: { 47 | chunks: 'all', 48 | cacheGroups: { 49 | vendors: { 50 | test: /[\\/]node_modules[\\/]/, 51 | priority: -10, 52 | name: 'vendors', 53 | } 54 | } 55 | } 56 | }, 57 | performance: false, 58 | output: { 59 | path: path.resolve(__dirname, '../dist') 60 | } 61 | } -------------------------------------------------------------------------------- /lesson 47/build/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | entry: { 8 | main: './src/index.js', 9 | }, 10 | module: { 11 | rules: [{ 12 | test: /\.js$/, 13 | include: path.resolve(__dirname, '../src'), 14 | use: [{ 15 | loader: 'babel-loader' 16 | }] 17 | }, { 18 | test: /\.(jpg|png|gif)$/, 19 | use: { 20 | loader: 'url-loader', 21 | options: { 22 | name: '[name]_[hash].[ext]', 23 | outputPath: 'images/', 24 | limit: 10240 25 | } 26 | } 27 | }, { 28 | test: /\.(eot|ttf|svg)$/, 29 | use: { 30 | loader: 'file-loader' 31 | } 32 | }] 33 | }, 34 | plugins: [ 35 | new HtmlWebpackPlugin({ 36 | template: 'src/index.html' 37 | }), 38 | new CleanWebpackPlugin(['dist'], { 39 | root: path.resolve(__dirname, '../') 40 | }) 41 | ], 42 | optimization: { 43 | runtimeChunk: { 44 | name: 'runtime' 45 | }, 46 | usedExports: true, 47 | splitChunks: { 48 | chunks: 'all', 49 | cacheGroups: { 50 | vendors: { 51 | test: /[\\/]node_modules[\\/]/, 52 | priority: -10, 53 | name: 'vendors', 54 | } 55 | } 56 | } 57 | }, 58 | performance: false, 59 | output: { 60 | path: path.resolve(__dirname, '../dist') 61 | } 62 | } -------------------------------------------------------------------------------- /lesson 46/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server" 8 | }, 9 | "author": "haiyang", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.2.0", 13 | "@babel/plugin-transform-runtime": "^7.2.0", 14 | "@babel/preset-env": "^7.2.0", 15 | "@babel/preset-react": "^7.0.0", 16 | "autoprefixer": "^9.3.1", 17 | "axios": "^0.18.0", 18 | "babel-eslint": "^10.0.1", 19 | "babel-loader": "^8.0.4", 20 | "clean-webpack-plugin": "^1.0.0", 21 | "css-loader": "^1.0.1", 22 | "eslint": "^5.12.0", 23 | "eslint-config-airbnb": "^17.1.0", 24 | "eslint-loader": "^2.1.1", 25 | "eslint-plugin-import": "^2.14.0", 26 | "eslint-plugin-jsx-a11y": "^6.1.2", 27 | "eslint-plugin-react": "^7.12.3", 28 | "express": "^4.16.4", 29 | "file-loader": "^2.0.0", 30 | "html-webpack-plugin": "^3.2.0", 31 | "node-sass": "^4.10.0", 32 | "postcss-loader": "^3.0.0", 33 | "sass-loader": "^7.1.0", 34 | "style-loader": "^0.23.1", 35 | "url-loader": "^1.1.2", 36 | "webpack-cli": "^3.1.2", 37 | "webpack-dev-middleware": "^3.4.0", 38 | "webpack-dev-server": "^3.1.10" 39 | }, 40 | "dependencies": { 41 | "@babel/polyfill": "^7.0.0", 42 | "@babel/runtime": "^7.2.0", 43 | "@babel/runtime-corejs2": "^7.2.0", 44 | "react": "^16.6.3", 45 | "react-dom": "^16.6.3", 46 | "react-router-dom": "^4.3.1", 47 | "webpack": "^4.25.1" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /lesson 42/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "sideEffects": [ 4 | "*.css" 5 | ], 6 | "version": "1.0.0", 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "start": "http-server dist", 11 | "dev": "webpack-dev-server --config ./build/webpack.dev.js", 12 | "build": "webpack --config ./build/webpack.prod.js" 13 | }, 14 | "author": "haiyang", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "@babel/core": "^7.2.0", 18 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 19 | "@babel/plugin-transform-runtime": "^7.2.0", 20 | "@babel/preset-env": "^7.2.0", 21 | "@babel/preset-react": "^7.0.0", 22 | "autoprefixer": "^9.3.1", 23 | "babel-loader": "^8.0.4", 24 | "clean-webpack-plugin": "^1.0.0", 25 | "css-loader": "^1.0.1", 26 | "file-loader": "^2.0.0", 27 | "html-webpack-plugin": "^3.2.0", 28 | "http-server": "^0.11.1", 29 | "mini-css-extract-plugin": "^0.5.0", 30 | "node-sass": "^4.10.0", 31 | "optimize-css-assets-webpack-plugin": "^5.0.1", 32 | "postcss-loader": "^3.0.0", 33 | "sass-loader": "^7.1.0", 34 | "style-loader": "^0.23.1", 35 | "url-loader": "^1.1.2", 36 | "webpack": "^4.25.1", 37 | "webpack-cli": "^3.1.2", 38 | "webpack-dev-server": "^3.1.10", 39 | "webpack-merge": "^4.1.5", 40 | "workbox-webpack-plugin": "^3.6.3" 41 | }, 42 | "dependencies": { 43 | "@babel/polyfill": "^7.0.0", 44 | "@babel/runtime": "^7.2.0", 45 | "@babel/runtime-corejs2": "^7.2.0", 46 | "react": "^16.6.3", 47 | "react-dom": "^16.6.3" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /library 41/dist/library.js: -------------------------------------------------------------------------------- 1 | !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("lodash")):"function"==typeof define&&define.amd?define(["lodash"],n):"object"==typeof exports?exports.root=n(require("lodash")):e.root=n(e.lodash)}(window,function(e){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([function(n,t){n.exports=e},function(e,n,t){"use strict";t.r(n);var r={};t.r(r),t.d(r,"add",function(){return u}),t.d(r,"minus",function(){return i}),t.d(r,"multiply",function(){return f}),t.d(r,"division",function(){return c});var o={};function u(e,n){return e+n}function i(e,n){return e-n}function f(e,n){return e*n}function c(e,n){return e/n}t.r(o),t.d(o,"join",function(){return a});var d=t(0),l=t.n(d);function a(e,n){return l.a.join([e,n]," ")}n.default={math:r,string:o}}])}); -------------------------------------------------------------------------------- /bundler 54/bundler.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 | const moduleAnalyser = (filename) => { 8 | const content = fs.readFileSync(filename, 'utf-8'); 9 | const ast = parser.parse(content, { 10 | sourceType: 'module' 11 | }); 12 | const dependencies = {}; 13 | traverse(ast, { 14 | ImportDeclaration({ node }) { 15 | const dirname = path.dirname(filename); 16 | const newFile = './' + path.join(dirname, node.source.value); 17 | dependencies[node.source.value] = newFile; 18 | } 19 | }); 20 | const { code } = babel.transformFromAst(ast, null, { 21 | presets: ["@babel/preset-env"] 22 | }); 23 | return { 24 | filename, 25 | dependencies, 26 | code 27 | } 28 | } 29 | 30 | // 分析依赖图谱，存取所有模块依赖信息 31 | const makeDependenciesGraph = (entry) => { 32 | // 入口模块分析 33 | const entryModule = moduleAnalyser(entry); 34 | // 分析每个模块所有依赖数组 35 | const graphArray = [ entryModule ]; 36 | for(let i = 0; i < graphArray.length; i++) { 37 | const item = graphArray[i]; 38 | const { dependencies } = item; 39 | if(dependencies) { 40 | for(let j in dependencies) { 41 | graphArray.push( 42 | moduleAnalyser(dependencies[j]) 43 | ); 44 | } 45 | } 46 | } 47 | // 做数据结构转换，编程对象形式 48 | const graph = {}; 49 | graphArray.forEach(item => { 50 | graph[item.filename] = { 51 | dependencies: item.dependencies, 52 | code: item.code 53 | } 54 | }); 55 | return graph; 56 | } 57 | 58 | const graghInfo = makeDependenciesGraph('./src/index.js'); 59 | console.log(graghInfo); 60 | -------------------------------------------------------------------------------- /lesson 48/build/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | entry: { 8 | main: './src/index.js', 9 | }, 10 | resolve: {//引入资源文件写后缀，逻辑代码配置在extensions中 11 | extensions: ['.js', '.jsx'],//引入时不写文件后缀名，默认先找js文件，如果没有，再找jsx文件 12 | alias: {//起别名，防止引入路径过长 13 | child: path.resolve(__dirname, '../src/a/b/c/child') 14 | } 15 | }, 16 | module: { 17 | rules: [{ 18 | test: /\.jsx?$/, 19 | include: path.resolve(__dirname, '../src'), 20 | use: [{ 21 | loader: 'babel-loader' 22 | }] 23 | }, { 24 | test: /\.(jpg|png|gif)$/, 25 | use: { 26 | loader: 'url-loader', 27 | options: { 28 | name: '[name]_[hash].[ext]', 29 | outputPath: 'images/', 30 | limit: 10240 31 | } 32 | } 33 | }, { 34 | test: /\.(eot|ttf|svg)$/, 35 | use: { 36 | loader: 'file-loader' 37 | } 38 | }] 39 | }, 40 | plugins: [ 41 | new HtmlWebpackPlugin({ 42 | template: 'src/index.html' 43 | }), 44 | new CleanWebpackPlugin(['dist'], { 45 | root: path.resolve(__dirname, '../') 46 | }) 47 | ], 48 | optimization: { 49 | runtimeChunk: { 50 | name: 'runtime' 51 | }, 52 | usedExports: true, 53 | splitChunks: { 54 | chunks: 'all', 55 | cacheGroups: { 56 | vendors: { 57 | test: /[\\/]node_modules[\\/]/, 58 | priority: -10, 59 | name: 'vendors', 60 | } 61 | } 62 | } 63 | }, 64 | performance: false, 65 | output: { 66 | path: path.resolve(__dirname, '../dist') 67 | } 68 | } -------------------------------------------------------------------------------- /lesson 410/dist/index.e0dc5336c93b426515ef.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[ 2 | /* 0 */ 3 | /***/ (function(module, exports, __webpack_require__) { 4 | 5 | module.exports = (__webpack_require__(1))(1); 6 | 7 | /***/ }), 8 | /* 1 */ 9 | /***/ (function(module, exports) { 10 | 11 | module.exports = react; 12 | 13 | /***/ }), 14 | /* 2 */ 15 | /***/ (function(module, exports, __webpack_require__) { 16 | 17 | module.exports = (__webpack_require__(1))(8); 18 | 19 | /***/ }), 20 | /* 3 */ 21 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 22 | 23 | "use strict"; 24 | __webpack_require__.r(__webpack_exports__); 25 | /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); 26 | /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 27 | /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); 28 | /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__); 29 | 30 | 31 | 32 | class App extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] { 33 | render() { 34 | return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "This is Home Page")); 35 | } 36 | 37 | } 38 | 39 | react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App, null), document.getElementById('root')); 40 | 41 | /***/ }) 42 | ],[[3,0]]]); 43 | //# sourceMappingURL=index.e0dc5336c93b426515ef.js.map -------------------------------------------------------------------------------- /lesson 47/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "sideEffects": [ 4 | "*.css" 5 | ], 6 | "version": "1.0.0", 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "dev-build": "webpack --config ./build/webpack.dev.js", 11 | "dev": "webpack-dev-server --config ./build/webpack.dev.js", 12 | "build": "webpack --config ./build/webpack.prod.js" 13 | }, 14 | "author": "haiyang", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@babel/core": "^7.2.0", 18 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 19 | "@babel/plugin-transform-runtime": "^7.2.0", 20 | "@babel/preset-env": "^7.2.0", 21 | "@babel/preset-react": "^7.0.0", 22 | "autoprefixer": "^9.3.1", 23 | "babel-loader": "^8.0.4", 24 | "clean-webpack-plugin": "^1.0.0", 25 | "css-loader": "^1.0.1", 26 | "express": "^4.16.4", 27 | "file-loader": "^2.0.0", 28 | "html-webpack-plugin": "^3.2.0", 29 | "imports-loader": "^0.8.0", 30 | "mini-css-extract-plugin": "^0.5.0", 31 | "node-sass": "^4.10.0", 32 | "optimize-css-assets-webpack-plugin": "^5.0.1", 33 | "postcss-loader": "^3.0.0", 34 | "sass-loader": "^7.1.0", 35 | "style-loader": "^0.23.1", 36 | "url-loader": "^1.1.2", 37 | "webpack-cli": "^3.1.2", 38 | "webpack-dev-middleware": "^3.4.0", 39 | "webpack-dev-server": "^3.1.10", 40 | "webpack-merge": "^4.1.5" 41 | }, 42 | "dependencies": { 43 | "@babel/polyfill": "^7.0.0", 44 | "@babel/runtime": "^7.2.0", 45 | "@babel/runtime-corejs2": "^7.2.0", 46 | "jquery": "^3.3.1", 47 | "lodash": "^4.17.11", 48 | "react": "^16.6.3", 49 | "react-dom": "^16.6.3", 50 | "webpack": "^4.25.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /lesson 48/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "sideEffects": [ 4 | "*.css" 5 | ], 6 | "version": "1.0.0", 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "dev-build": "webpack --config ./build/webpack.dev.js", 11 | "dev": "webpack-dev-server --config ./build/webpack.dev.js", 12 | "build": "webpack --config ./build/webpack.prod.js" 13 | }, 14 | "author": "haiyang", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "@babel/core": "^7.2.0", 18 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 19 | "@babel/plugin-transform-runtime": "^7.2.0", 20 | "@babel/preset-env": "^7.2.0", 21 | "@babel/preset-react": "^7.0.0", 22 | "autoprefixer": "^9.3.1", 23 | "babel-loader": "^8.0.4", 24 | "clean-webpack-plugin": "^1.0.0", 25 | "css-loader": "^1.0.1", 26 | "express": "^4.16.4", 27 | "file-loader": "^2.0.0", 28 | "html-webpack-plugin": "^3.2.0", 29 | "imports-loader": "^0.8.0", 30 | "mini-css-extract-plugin": "^0.5.0", 31 | "node-sass": "^4.10.0", 32 | "optimize-css-assets-webpack-plugin": "^5.0.1", 33 | "postcss-loader": "^3.0.0", 34 | "sass-loader": "^7.1.0", 35 | "style-loader": "^0.23.1", 36 | "url-loader": "^1.1.2", 37 | "webpack-cli": "^3.1.2", 38 | "webpack-dev-middleware": "^3.4.0", 39 | "webpack-dev-server": "^3.1.10", 40 | "webpack-merge": "^4.1.5" 41 | }, 42 | "dependencies": { 43 | "@babel/polyfill": "^7.0.0", 44 | "@babel/runtime": "^7.2.0", 45 | "@babel/runtime-corejs2": "^7.2.0", 46 | "jquery": "^3.3.1", 47 | "lodash": "^4.17.11", 48 | "react": "^16.6.3", 49 | "react-dom": "^16.6.3", 50 | "webpack": "^4.25.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /lesson 410/dist/list.467dbe57dede31463b15.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[3],[ 2 | /* 0 */ 3 | /***/ (function(module, exports, __webpack_require__) { 4 | 5 | module.exports = (__webpack_require__(1))(1); 6 | 7 | /***/ }), 8 | /* 1 */ 9 | /***/ (function(module, exports) { 10 | 11 | module.exports = react; 12 | 13 | /***/ }), 14 | /* 2 */ 15 | /***/ (function(module, exports, __webpack_require__) { 16 | 17 | module.exports = (__webpack_require__(1))(8); 18 | 19 | /***/ }), 20 | /* 3 */, 21 | /* 4 */ 22 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 23 | 24 | "use strict"; 25 | __webpack_require__.r(__webpack_exports__); 26 | /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); 27 | /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 28 | /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); 29 | /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__); 30 | 31 | 32 | 33 | class App extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] { 34 | render() { 35 | return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "This is List Page")); 36 | } 37 | 38 | } 39 | 40 | react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App, null), document.getElementById('root')); 41 | 42 | /***/ }) 43 | ],[[4,0]]]); 44 | //# sourceMappingURL=list.467dbe57dede31463b15.js.map -------------------------------------------------------------------------------- /lesson 410/dist/detail.497e2cecc29819888e63.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[ 2 | /* 0 */ 3 | /***/ (function(module, exports, __webpack_require__) { 4 | 5 | module.exports = (__webpack_require__(1))(1); 6 | 7 | /***/ }), 8 | /* 1 */ 9 | /***/ (function(module, exports) { 10 | 11 | module.exports = react; 12 | 13 | /***/ }), 14 | /* 2 */ 15 | /***/ (function(module, exports, __webpack_require__) { 16 | 17 | module.exports = (__webpack_require__(1))(8); 18 | 19 | /***/ }), 20 | /* 3 */, 21 | /* 4 */, 22 | /* 5 */ 23 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 24 | 25 | "use strict"; 26 | __webpack_require__.r(__webpack_exports__); 27 | /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0); 28 | /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 29 | /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); 30 | /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__); 31 | 32 | 33 | 34 | class App extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] { 35 | render() { 36 | return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "This is Detail Page")); 37 | } 38 | 39 | } 40 | 41 | react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App, null), document.getElementById('root')); 42 | 43 | /***/ }) 44 | ],[[5,0]]]); 45 | //# sourceMappingURL=detail.497e2cecc29819888e63.js.map -------------------------------------------------------------------------------- /my-app56/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /lesson 49/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "sideEffects": [ 4 | "*.css" 5 | ], 6 | "version": "1.0.0", 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "dev-build": "webpack --config ./build/webpack.dev.js", 11 | "dev": "webpack-dev-server --config ./build/webpack.dev.js", 12 | "build": "webpack --config ./build/webpack.prod.js", 13 | "build:dll": "webpack --config ./build/webpack.dll.js" 14 | }, 15 | "author": "haiyang", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "@babel/core": "^7.2.0", 19 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 20 | "@babel/plugin-transform-runtime": "^7.2.0", 21 | "@babel/preset-env": "^7.2.0", 22 | "@babel/preset-react": "^7.0.0", 23 | "autoprefixer": "^9.3.1", 24 | "babel-loader": "^8.0.4", 25 | "clean-webpack-plugin": "^1.0.0", 26 | "css-loader": "^1.0.1", 27 | "express": "^4.16.4", 28 | "file-loader": "^2.0.0", 29 | "html-webpack-plugin": "^3.2.0", 30 | "imports-loader": "^0.8.0", 31 | "mini-css-extract-plugin": "^0.5.0", 32 | "node-sass": "^4.10.0", 33 | "optimize-css-assets-webpack-plugin": "^5.0.1", 34 | "postcss-loader": "^3.0.0", 35 | "sass-loader": "^7.1.0", 36 | "style-loader": "^0.23.1", 37 | "url-loader": "^1.1.2", 38 | "webpack-cli": "^3.1.2", 39 | "webpack-dev-middleware": "^3.4.0", 40 | "webpack-dev-server": "^3.1.10", 41 | "webpack-merge": "^4.1.5" 42 | }, 43 | "dependencies": { 44 | "@babel/polyfill": "^7.0.0", 45 | "@babel/runtime": "^7.2.0", 46 | "@babel/runtime-corejs2": "^7.2.0", 47 | "add-asset-html-webpack-plugin": "^3.1.2", 48 | "jquery": "^3.3.1", 49 | "lodash": "^4.17.11", 50 | "react": "^16.6.3", 51 | "react-dom": "^16.6.3", 52 | "webpack": "^4.25.1" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /lesson 410/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson", 3 | "sideEffects": [ 4 | "*.css" 5 | ], 6 | "version": "1.0.0", 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "dev-build": "webpack --config ./build/webpack.dev.js", 11 | "dev": "webpack-dev-server --config ./build/webpack.dev.js", 12 | "build": "webpack --config ./build/webpack.prod.js", 13 | "build:dll": "webpack --config ./build/webpack.dll.js" 14 | }, 15 | "author": "haiyang", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "@babel/core": "^7.2.0", 19 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 20 | "@babel/plugin-transform-runtime": "^7.2.0", 21 | "@babel/preset-env": "^7.2.0", 22 | "@babel/preset-react": "^7.0.0", 23 | "autoprefixer": "^9.3.1", 24 | "babel-loader": "^8.0.4", 25 | "clean-webpack-plugin": "^1.0.0", 26 | "css-loader": "^1.0.1", 27 | "express": "^4.16.4", 28 | "file-loader": "^2.0.0", 29 | "html-webpack-plugin": "^3.2.0", 30 | "imports-loader": "^0.8.0", 31 | "mini-css-extract-plugin": "^0.5.0", 32 | "node-sass": "^4.10.0", 33 | "optimize-css-assets-webpack-plugin": "^5.0.1", 34 | "postcss-loader": "^3.0.0", 35 | "sass-loader": "^7.1.0", 36 | "style-loader": "^0.23.1", 37 | "url-loader": "^1.1.2", 38 | "webpack-cli": "^3.1.2", 39 | "webpack-dev-middleware": "^3.4.0", 40 | "webpack-dev-server": "^3.1.10", 41 | "webpack-merge": "^4.1.5" 42 | }, 43 | "dependencies": { 44 | "@babel/polyfill": "^7.0.0", 45 | "@babel/runtime": "^7.2.0", 46 | "@babel/runtime-corejs2": "^7.2.0", 47 | "add-asset-html-webpack-plugin": "^3.1.2", 48 | "jquery": "^3.3.1", 49 | "lodash": "^4.17.11", 50 | "react": "^16.6.3", 51 | "react-dom": "^16.6.3", 52 | "webpack": "^4.25.1" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /lesson 44/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | mode: 'development', 8 | devtool: 'cheap-module-eval-source-map', 9 | entry: { 10 | main: './src/index.js' 11 | }, 12 | devServer: { 13 | contentBase: './dist', 14 | open: true, 15 | port: 8080, 16 | hot: true, 17 | hotOnly: true, 18 | proxy: { 19 | '/react/api': { 20 | target: 'https://www.dell-lee.com', 21 | secure: false, 22 | pathRewrite: { 23 | 'header.json': 'demo.json' 24 | }, 25 | changeOrigin: true, 26 | headers: { 27 | host: 'www.dell-lee.com', 28 | } 29 | } 30 | } 31 | }, 32 | module: { 33 | rules: [{ 34 | test: /\.js$/, 35 | exclude: /node_modules/, 36 | loader: 'babel-loader', 37 | }, { 38 | test: /\.(jpg|png|gif)$/, 39 | use: { 40 | loader: 'url-loader', 41 | options: { 42 | name: '[name]_[hash].[ext]', 43 | outputPath: 'images/', 44 | limit: 10240 45 | } 46 | } 47 | }, { 48 | test: /\.(eot|ttf|svg)$/, 49 | use: { 50 | loader: 'file-loader' 51 | } 52 | }, { 53 | test: /\.scss$/, 54 | use: [ 55 | 'style-loader', 56 | { 57 | loader: 'css-loader', 58 | options: { 59 | importLoaders: 2 60 | } 61 | }, 62 | 'postcss-loader', 63 | 'sass-loader' 64 | 65 | ] 66 | }, { 67 | test: /\.css$/, 68 | use: [ 69 | 'style-loader', 70 | 'css-loader', 71 | 'postcss-loader' 72 | ] 73 | }] 74 | }, 75 | plugins: [ 76 | new HtmlWebpackPlugin({ 77 | template: 'src/index.html' 78 | }), 79 | new CleanWebpackPlugin(['dist']), 80 | new webpack.HotModuleReplacementPlugin() 81 | ], 82 | output: { 83 | filename: '[name].js', 84 | path: path.resolve(__dirname, 'dist') 85 | } 86 | } -------------------------------------------------------------------------------- /lesson 45/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | mode: 'development', 8 | devtool: 'cheap-module-eval-source-map', 9 | entry: { 10 | main: './src/index.js' 11 | }, 12 | devServer: { 13 | contentBase: './dist', 14 | open: true, 15 | port: 8080, 16 | hot: true, 17 | hotOnly: true, 18 | historyApiFallback: true, 19 | proxy: { 20 | '/react/api': { 21 | target: 'https://www.dell-lee.com', 22 | secure: false, 23 | pathRewrite: { 24 | 'header.json': 'demo.json' 25 | }, 26 | changeOrigin: true, 27 | headers: { 28 | host: 'www.dell-lee.com', 29 | } 30 | } 31 | } 32 | }, 33 | module: { 34 | rules: [{ 35 | test: /\.js$/, 36 | exclude: /node_modules/, 37 | loader: 'babel-loader', 38 | }, { 39 | test: /\.(jpg|png|gif)$/, 40 | use: { 41 | loader: 'url-loader', 42 | options: { 43 | name: '[name]_[hash].[ext]', 44 | outputPath: 'images/', 45 | limit: 10240 46 | } 47 | } 48 | }, { 49 | test: /\.(eot|ttf|svg)$/, 50 | use: { 51 | loader: 'file-loader' 52 | } 53 | }, { 54 | test: /\.scss$/, 55 | use: [ 56 | 'style-loader', 57 | { 58 | loader: 'css-loader', 59 | options: { 60 | importLoaders: 2 61 | } 62 | }, 63 | 'postcss-loader', 64 | 'sass-loader' 65 | 66 | ] 67 | }, { 68 | test: /\.css$/, 69 | use: [ 70 | 'style-loader', 71 | 'css-loader', 72 | 'postcss-loader' 73 | ] 74 | }] 75 | }, 76 | plugins: [ 77 | new HtmlWebpackPlugin({ 78 | template: 'src/index.html' 79 | }), 80 | new CleanWebpackPlugin(['dist']), 81 | new webpack.HotModuleReplacementPlugin() 82 | ], 83 | output: { 84 | filename: '[name].js', 85 | path: path.resolve(__dirname, 'dist') 86 | } 87 | } -------------------------------------------------------------------------------- /lesson 46/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const webpack = require('webpack'); 5 | 6 | module.exports = { 7 | mode: 'development', 8 | devtool: 'cheap-module-eval-source-map', 9 | entry: { 10 | main: './src/index.js' 11 | }, 12 | devServer: { 13 | overlay: true, 14 | contentBase: './dist', 15 | open: true, 16 | port: 8080, 17 | hot: true, 18 | hotOnly: true, 19 | historyApiFallback: true, 20 | proxy: { 21 | '/react/api': { 22 | target: 'https://www.dell-lee.com', 23 | secure: false, 24 | pathRewrite: { 25 | 'header.json': 'demo.json' 26 | }, 27 | changeOrigin: true, 28 | headers: { 29 | host: 'www.dell-lee.com', 30 | } 31 | } 32 | } 33 | }, 34 | module: { 35 | rules: [{ 36 | test: /\.js$/, 37 | exclude: /node_modules/, 38 | use: ['babel-loader', 'eslint-loader'] 39 | }, { 40 | test: /\.(jpg|png|gif)$/, 41 | use: { 42 | loader: 'url-loader', 43 | options: { 44 | name: '[name]_[hash].[ext]', 45 | outputPath: 'images/', 46 | limit: 10240 47 | } 48 | } 49 | }, { 50 | test: /\.(eot|ttf|svg)$/, 51 | use: { 52 | loader: 'file-loader' 53 | } 54 | }, { 55 | test: /\.scss$/, 56 | use: [ 57 | 'style-loader', 58 | { 59 | loader: 'css-loader', 60 | options: { 61 | importLoaders: 2 62 | } 63 | }, 64 | 'postcss-loader', 65 | 'sass-loader' 66 | 67 | ] 68 | }, { 69 | test: /\.css$/, 70 | use: [ 71 | 'style-loader', 72 | 'css-loader', 73 | 'postcss-loader' 74 | ] 75 | }] 76 | }, 77 | plugins: [ 78 | new HtmlWebpackPlugin({ 79 | template: 'src/index.html' 80 | }), 81 | new CleanWebpackPlugin(['dist']), 82 | new webpack.HotModuleReplacementPlugin() 83 | ], 84 | output: { 85 | filename: '[name].js', 86 | path: path.resolve(__dirname, 'dist') 87 | } 88 | } -------------------------------------------------------------------------------- /lesson 49/build/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin'); 6 | const webpack = require('webpack'); 7 | 8 | const plugins = [ 9 | new HtmlWebpackPlugin({ 10 | template: 'src/index.html' 11 | }), 12 | new CleanWebpackPlugin(['dist'], { 13 | root: path.resolve(__dirname, '../') 14 | }) 15 | ]; 16 | 17 | const files = fs.readdirSync(path.resolve(__dirname, '../dll')); 18 | files.forEach(file => { 19 | if(/.*\.dll.js/.test(file)) { 20 | plugins.push(new AddAssetHtmlWebpackPlugin({ 21 | filepath: path.resolve(__dirname, '../dll', file) 22 | })) 23 | } 24 | if(/.*\.manifest.json/.test(file)) { 25 | plugins.push(new webpack.DllReferencePlugin({ 26 | manifest: path.resolve(__dirname, '../dll', file) 27 | })) 28 | } 29 | }) 30 | 31 | module.exports = { 32 | entry: { 33 | main: './src/index.js', 34 | }, 35 | resolve: { 36 | extensions: ['.js', '.jsx'], 37 | }, 38 | module: { 39 | rules: [{ 40 | test: /\.jsx?$/, 41 | include: path.resolve(__dirname, '../src'), 42 | use: [{ 43 | loader: 'babel-loader' 44 | }] 45 | }, { 46 | test: /\.(jpg|png|gif)$/, 47 | use: { 48 | loader: 'url-loader', 49 | options: { 50 | name: '[name]_[hash].[ext]', 51 | outputPath: 'images/', 52 | limit: 10240 53 | } 54 | } 55 | }, { 56 | test: /\.(eot|ttf|svg)$/, 57 | use: { 58 | loader: 'file-loader' 59 | } 60 | }] 61 | }, 62 | plugins, 63 | optimization: { 64 | runtimeChunk: { 65 | name: 'runtime' 66 | }, 67 | usedExports: true, 68 | splitChunks: { 69 | chunks: 'all', 70 | cacheGroups: { 71 | vendors: { 72 | test: /[\\/]node_modules[\\/]/, 73 | priority: -10, 74 | name: 'vendors', 75 | } 76 | } 77 | } 78 | }, 79 | performance: false, 80 | output: { 81 | path: path.resolve(__dirname, '../dist') 82 | } 83 | } -------------------------------------------------------------------------------- /bundler 55/bundler.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 | const moduleAnalyser = (filename) => { 8 | const content = fs.readFileSync(filename, 'utf-8'); 9 | const ast = parser.parse(content, { 10 | sourceType: 'module' 11 | }); 12 | const dependencies = {}; 13 | traverse(ast, { 14 | ImportDeclaration({ node }) { 15 | const dirname = path.dirname(filename); 16 | const newFile = './' + path.join(dirname, node.source.value); 17 | dependencies[node.source.value] = newFile; 18 | } 19 | }); 20 | const { code } = babel.transformFromAst(ast, null, { 21 | presets: ["@babel/preset-env"] 22 | }); 23 | return { 24 | filename, 25 | dependencies, 26 | code 27 | } 28 | } 29 | 30 | const makeDependenciesGraph = (entry) => { 31 | const entryModule = moduleAnalyser(entry); 32 | const graphArray = [ entryModule ]; 33 | for(let i = 0; i < graphArray.length; i++) { 34 | const item = graphArray[i]; 35 | const { dependencies } = item; 36 | if(dependencies) { 37 | for(let j in dependencies) { 38 | graphArray.push( 39 | moduleAnalyser(dependencies[j]) 40 | ); 41 | } 42 | } 43 | } 44 | const graph = {}; 45 | graphArray.forEach(item => { 46 | graph[item.filename] = { 47 | dependencies: item.dependencies, 48 | code: item.code 49 | } 50 | }); 51 | return graph; 52 | } 53 | 54 | // 最终生成的代码 55 | const generateCode = (entry) => { 56 | const graph = JSON.stringify(makeDependenciesGraph(entry)); 57 | return ` 58 | (function(graph){ 59 | function require(module) { 60 | function localRequire(relativePath) { 61 | return require(graph[module].dependencies[relativePath]); 62 | } 63 | var exports = {}; 64 | (function(require, exports, code){ 65 | eval(code) 66 | })(localRequire, exports, graph[module].code); 67 | return exports; 68 | }; 69 | require('${entry}') 70 | })(${graph}); 71 | `; 72 | } 73 | 74 | const code = generateCode('./src/index.js'); 75 | console.log(code); 76 | 77 | -------------------------------------------------------------------------------- /my-project57/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /lesson 410/build/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin'); 6 | const webpack = require('webpack'); 7 | 8 | 9 | const makePlugins = (configs) => { 10 | const plugins = [ 11 | new CleanWebpackPlugin(['dist'], { 12 | root: path.resolve(__dirname, '../') 13 | }) 14 | ]; 15 | Object.keys(configs.entry).forEach(item => { 16 | plugins.push( 17 | new HtmlWebpackPlugin({ 18 | template: 'src/index.html', 19 | filename: `${item}.html`, 20 | chunks: ['runtime', 'vendors', item] 21 | }) 22 | ) 23 | }); 24 | const files = fs.readdirSync(path.resolve(__dirname, '../dll')); 25 | files.forEach(file => { 26 | if(/.*\.dll.js/.test(file)) { 27 | plugins.push(new AddAssetHtmlWebpackPlugin({ 28 | filepath: path.resolve(__dirname, '../dll', file) 29 | })) 30 | } 31 | if(/.*\.manifest.json/.test(file)) { 32 | plugins.push(new webpack.DllReferencePlugin({ 33 | manifest: path.resolve(__dirname, '../dll', file) 34 | })) 35 | } 36 | }); 37 | return plugins; 38 | } 39 | 40 | const configs = { 41 | entry: { 42 | index: './src/index.js', 43 | list: './src/list.js', 44 | detail: './src/detail.js', 45 | }, 46 | resolve: { 47 | extensions: ['.js', '.jsx'], 48 | }, 49 | module: { 50 | rules: [{ 51 | test: /\.jsx?$/, 52 | include: path.resolve(__dirname, '../src'), 53 | use: [{ 54 | loader: 'babel-loader' 55 | }] 56 | }, { 57 | test: /\.(jpg|png|gif)$/, 58 | use: { 59 | loader: 'url-loader', 60 | options: { 61 | name: '[name]_[hash].[ext]', 62 | outputPath: 'images/', 63 | limit: 10240 64 | } 65 | } 66 | }, { 67 | test: /\.(eot|ttf|svg)$/, 68 | use: { 69 | loader: 'file-loader' 70 | } 71 | }] 72 | }, 73 | optimization: { 74 | runtimeChunk: { 75 | name: 'runtime' 76 | }, 77 | usedExports: true, 78 | splitChunks: { 79 | chunks: 'all', 80 | cacheGroups: { 81 | vendors: { 82 | test: /[\\/]node_modules[\\/]/, 83 | priority: -10, 84 | name: 'vendors', 85 | } 86 | } 87 | } 88 | }, 89 | performance: false, 90 | output: { 91 | path: path.resolve(__dirname, '../dist') 92 | } 93 | } 94 | 95 | configs.plugins = makePlugins(configs); 96 | 97 | module.exports = configs -------------------------------------------------------------------------------- /my-app56/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /my-app56/config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const url = require('url'); 6 | 7 | // Make sure any symlinks in the project folder are resolved: 8 | // https://github.com/facebook/create-react-app/issues/637 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 11 | 12 | const envPublicUrl = process.env.PUBLIC_URL; 13 | 14 | function ensureSlash(inputPath, needsSlash) { 15 | const hasSlash = inputPath.endsWith('/'); 16 | if (hasSlash && !needsSlash) { 17 | return inputPath.substr(0, inputPath.length - 1); 18 | } else if (!hasSlash && needsSlash) { 19 | return `${inputPath}/`; 20 | } else { 21 | return inputPath; 22 | } 23 | } 24 | 25 | const getPublicUrl = appPackageJson => 26 | envPublicUrl || require(appPackageJson).homepage; 27 | 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 29 | // "public path" at which the app is served. 30 | // Webpack needs to know it to put the right