# webpack(基础)

  npm i html-webpack-plugin -D

  new HtmlWebpackPlugin({
    template: './src/index.html', // 指定的模板名字
    filename: 'index.html', // 产出的文件名
    hash: true, // 为了避免缓存,可以在产出的资源后面添加hash值
    chunks: ['common', 'index', 'login', ], //引入多个js文件 默认是乱序, 要加入的配置(manual 手动) 才安排数组顺序加入
    chunksSortMode: 'manual', // 对引入代码块进行排序 
  })

const purgecssWebpackPlugin =  require('purgecss-webpack-plugin')
let MiniCssExtractPlugin =  require('mini-css-extract-plugin')
    plugins: [
      //参数类似于webpackOptions.output
      new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename:'[id].css'
      })
    ]
    {
      test: /\.css/,
      include: path.resolve(__dirname,'src'),
      exclude: /node_modules/,
      use: [{
        loader: MiniCssExtractPlugin.loader
      },'css-loader']
    },
    {
      test: /\.less$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    },
    {
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    },
    // 增加前缀
    {
      test: /\.css$/, // 如果用到import 或者 require 文件 是css
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
    },
    // postcss.config.js
    module.exports = {
      plugins: [require('autoprefixer')]
    }
    new purgecssWebpackPlugin({
      paths:glob.sync(`${path.join(__dirname,'src')}/**/*` ,{nodir:true})// 不匹配目录，只匹配文件
    })

{
  test:/\.css/,
  use:['style-loader','css-loader',{
    loader:'px2rem-loader',
    options:{
      remUnit:75,//1個rem是75像素 若宽度是375px 则被转换成5
      remPrecesion:8//rem的精度 保留8位
    }
  }]
}

let docEle = document.documentElement
function setRemUnit(){
  // docEle.style.fontSize = docEle.clientWidth/5 + 'px'
  docEle.style.fontSize = '10vw'
}
setRemUnit()
window.addEventListener('resize',setRemUnit)

{
  test:/\.(jpg|png|bmp|gif|svg|ttf|woff|woff2|eot)/,
    use:[
    {
      loader:'url-loader',
      options:{
        limit:10*1024,
        // name 修改名字 可以处理路径
        name:'img/[name].[hash].[ext]',
        // outputPath 专门处理路径
        outputPath: 'images',
        publicPath:'../images'
      }
    }
  ]
}

{
  test: /\.(html|htm)$/,
  use: 'html-withimg-loader'
}

{
  test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
}

{
 test:/\.(woff|ttf|eot|svg|otf)$/,
     use:{
        loader:'url-loader',
        options:{//如果要加载的图片大小小于10K的话，就把这张图片转成base64编码内嵌到html网页中去
          limit:10*1024,
          outputPath: 'images',
          publicPath:'../images'
       }
   }
 },

@font-face {
    src: url('./fonts/HabanoST.otf') format('truetype');
    font-family: 'HabanoST';
}

.welcome {
    font-size:100px;
    font-family: 'HabanoST';
}

// vscode setting配置
    // #每次保存的时候自动格式化 他eslint保存 还有点冲突(格式化代码的时候 会把最后一行空格删除,eslint 需要保存这一行)
    "editor.formatOnSave": false,
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
// .eslintrc.js
module.exports = {
    parser: "babel-eslint", // 把源码转成语法树的工具
    extends: "airbnb", // 继承airbnb规则
    env: { // 指定运行环境
        browser: true,
        node: true,
    },
    rules: {
        "linebreak-style": "off",
        indent: ["error", 4], // 缩进风格
        quotes: ["error", "double"], // 引号类型
        semi: ["error", "always"], // 关闭语句强制分号结尾
        "no-console": "error", // 禁止使用console
        "arrow-parens": 0, // 箭头函数用小括号括起来
    },
};

{
    test: /\.jsx?$/,
    use: {
        loader: 'babel-loader',
        options:{
         "presets": ["@babel/preset-env","@babel/preset-react"],
         "plugins": [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
            ["@babel/plugin-proposal-class-properties", { "loose" : true }]
         ]
        }
    },
    include: path.join(__dirname,'src'),
    exclude:/node_modules/
},
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      "presets": [ // 插件的集合
        "@babel/preset-env", //转义ES6 ES7
        "@babel/preset-react", //转义 jsx语法
      ],
      "plugins": [ // 每个插件代表一个规则 需要传递参数 就写成数组
        ["@babel/plugin-proposal-decorators", { legacy: true }],// 处理装饰器语法
        ["@babel/plugin-proposal-class-properties", { loose: true }],//处理类的属性 
        // loose松散模式 
        ['@babel/plugin-transform-runtime',{
              corejs:false,
              helpers:true,
              regenerator:true,
              useESModules:true
            }]
      ]
    }
  }
}
/*
class A{
    static a=1
}
let a = new A()
console.log('index111',a,A.a)
*/
{
  loader:'eslint-loader',
  include: join(__dirname, './src')
  // exclude: /node_modules/
}
//.eslintrc
module.exports = {
  "parser":"babel-eslint",// 把源码转成语法树的工具
  "extends":"airbnb",// 继承airbnb规则
  env:{ //指定运行环境
    browser:true,
    node:true
  },
  rules:{
    "linebreak-style":"off",
    "indent": ["error", 4],//缩进风格
    "quotes": ["error", "double"],//引号类型 
    "semi": ["error", "always"],//关闭语句强制分号结尾
    "no-console": "error",//禁止使用console
    "arrow-parens": 0 //箭头函数用小括号括起来
    }
};

const TerserPlugin = require('terser-webpack-plugin'); // 压缩js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");// 压缩css
  
  optimization: { // 这里放优化的内容
    minimizer: [ //表示放优化的插件
      new TerserPlugin({
        include:/\.min\.js/,对那些文件压缩
       
      }),
      new OptimizeCSSAssetsPlugin({
        assetNameRegExp:/\.min\.css/,对那些文件压缩
        parallel: true, //开启多进程并进行压缩
        cache: true, //开启缓存
      })
    ]
  },

 optimization:{
    splitChunks:{//分隔代码块
      cacheGroups:{
        vendor:{//打包第三方
          chunks:'initial',//指定分隔的类型,默认有3中选项 all async initial
          name:'vendors',// 给分隔出去的代码块 起一个名字 vendors
          test:/node_modules/,//如果模块ID匹配这个正则的话,就会添加到vendors代码块中
          priority:-10,//优先级
        },
        commons:{
          chunks:'initial',
          name:'commons',
          minSize:0,//最小提取的字节
          minChunks:2,// 最少被几个chunk引用需要提取
          priority:-20
        }
      }
    }
  },

let glob = require('glob')

// glob.sync(`${path.join(__dirname,'src')}/**/*` ,{nodir:true})// 不匹配目录，只匹配文件
let rs = glob.sync('./src/**/*.{js,gif}')

console.log(rs) //返回src目录下所有的js和gif文件 不管多少层目录

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  mode:'production',// development
  entry: './src/index.js',
//   devtool:'source-map',
  devtool:'source-map',// eval source-map cheap module inline hidden-source-map
  module: {
    rules: [
        { test: /\.css$/, use: ['style-loader','css-loader']},
        {
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [["@babel/preset-env"], '@babel/preset-react'],
                plugins: [
                  ['@babel/plugin-proposal-decorators', { legacy: true }],
                  ['@babel/plugin-proposal-class-properties', { loose: true }],
                ],
              },
            },
            exclude:/node_modules/
        }
    ]
  },
  devServer: {
    static: path.resolve(__dirname, 'public'),
    port: 8081,
    open: true
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'}),
        // new webpack.SourceMapDevToolPlugin({
        //   append: '//# sourceMappingURL=http://127.0.0.1:8087/[url]',
        //   filename: '[file].map',
        // }),
        // new FileManagerPlugin({
        //   events: {
        //     onEnd:{
        //       copy: [{
        //         source: './dist/*.map',
        //         destination: '/Users/edz/Desktop/sourcemap/maps',
        //       }],
        //       delete: ['./dist/*.map'],
        //       archive: [{ 
        //         source: './dist',
        //         destination: './dist/dist.zip',
        //       }]
        //     }
        //   }
        // })
    ]
};

1、在webpack mode赋值
2、在package.json配置
"build:dev": "webpack  --mode development",
"build:prod": "webpack  --mode production"

// 1
import _ from 'lodash';
alert(_.join(['a','b','c'],'@'));

// 2
new webpack.ProvidePlugin({
    _:'lodash'
})
// 3
// ?是传参  !是分隔loader 和 原模块
import "expose-loader?$!jquery";
// 或者
{ 
  test: require.resolve("jquery"), 
  loader: "expose-loader?jQuery"
}

// 4、通过cdn 又想用import 语法 就要externals 配置
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
import $ from 'jquery'
externals: {
  jquery: 'jQuery'
},

// 5、通过插件  在页面中引入$模块即可使用
new htmlWebpackExternalsPlugin({
  externals:[
    {
      module:'$',//页面引入模块的名字
      entry:'https://cdn.bootcss.com/jquery/3.4.1/jquery.js',
      global:'jQuery',//从全局对象的那个属性上获取导出的值
    }
  ]
})

module.exports = {
  //默认false,也就是不开启
  watch:true,
  //只有开启监听模式时，watchOptions才有意义
  watchOptions:{
      //默认为空，不监听的文件或者文件夹，支持正则匹配
      ignored:/node_modules/,
      //监听到变化发生后会等300ms再去执行，默认300ms
      aggregateTimeout:300,
      //判断文件是否发生变化是通过不停的询问文件系统指定议是有变化实现的，默认每秒问1000次
      poll:1000
  }
}

new webpack.BannerPlugin('测试11'),
new CopyWebpackPlugin([{
  from: path.resolve(__dirname,'src/assets'),//静态资源目录源地址
  to:path.resolve(__dirname,'dist/assets') //目标地址，相对于output的path目录
}])
new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],})

  // 如果你使用了devServer那么所有产出的文件都会写到内存里,而不是写入到硬盘上,主要是为了速度
  devServer: {
    contentBase: path.join(__dirname, 'dist'),// 指定开启那个目录
    port:8080,
    host:'localhost',
    compress:true,//相当于启动gzip压缩
    // before 是一个钩子 此钩子会在web-dev-server启动之前执行
    before(app){ // 可以通过localhost:8080/users 直接访问到
      app.get('/users',(req,res)=>{
        res.json([{id:1,name:'zzzz'}])
      })
    },
    proxy:{
      // "/api":"http://localhost:3000",//这个情况是 访问 localhost:8080/api/users =>映射到 localhost:3000/api/users
      "/api":{
        target:"http://localhost:3000",
        pathRewrite:{
          "^/api":"",// api开头的 改为空
        },// 这种情况是  访问 localhost:8080/api/users =>映射到 localhost:3000/users
      }
    }
  },

devServer:{
  // 告诉 DevServer 要开启模块热替换模式
  hot: true,      
}  
plugins:[
  // new webpack.NamedModulesPlugin(), // 用于启动 HMR 时可以显示模块的相对路径
  new webpack.HotModuleReplacementPlugin(), // Hot Module Replacement 的插件
]

// index.js
import {fun2} from './func'
let result = fun2();

let root = document.getElementById('root')
root.innerHTML = result
// 只有当开启了模块热替换时 module.hot 才存在
if (module.hot) {
  // accept 函数的第一个参数指出当前文件接受哪些子模块的替换，这里表示只接受 ./AppComponent 这个子模块
  // 第2个参数用于在新的子模块加载完毕后需要执行的逻辑
  module.hot.accept(['./func.js'], () => {
    // 新的 AppComponent 加载成功后重新执行下组建渲染逻辑
    let func = require('./func')
    let rs = func.fun2()
    root.innerHTML = rs
  });
}

// func.js
function fun1(){
  return 'func231'
}
function fun2(){
  return 'fu1111111111122'
}
export {
  fun1,
  fun2
}

// react例子

import { render } from 'react-dom';
import App from './App';
import './index.css';
render(<App/>, document.getElementById('root'));

// 只有当开启了模块热替换时 module.hot 才存在
if (module.hot) {
  // accept 函数的第一个参数指出当前文件接受哪些子模块的替换，这里表示只接受 ./AppComponent 这个子模块
  // 第2个参数用于在新的子模块加载完毕后需要执行的逻辑
  module.hot.accept(['./App'], () => {
    // 新的 AppComponent 加载成功后重新执行下组建渲染逻辑
    let App=require('./App').default;  
    render(<App/>, document.getElementById('root'));
  });
}

resolve:{
// 按顺序 先找.js 在往后找
  extension:['.js','.jsx','.json','.css'],
//  配置别名 import bootstrap 直接找后面的文件
  alias:{
    "bootstrap":path.join(__dirname,"node_modules/bootstrap/dist/css/bootstrap.css"),
    'components': path.join(__dirname,'src'),// import rs from 'components/data.js' ==>定位到path.join(__dirname,'src','data.js')
  },
  // 第一个是减少查找路径 增快查找速度 第二个是添加额外额查找路径 只有是引入的时候 不添加路径 直接写包名
  modules:['node_modules','zfmoudle'],
  mainFields:['browser','module','main'],
  mainFiles:['index']
}

 resolveLoader: {
   // 第三方模块默认 查找的位子
    modules:['node_modules',path.resolve(__dirname,'loaders')],
    extensions:[ '.js', '.json' ],
    // 配置别名
    alias:{
      // 在loader中使用 loader1 就指向 __dirname/loaders/loaders1.js
      loader1:path.resolve(__dirname,'loaders','loaders1')
    }
    mainFields: [ 'loader', 'main' ]
  }

// jquery lodash都是不需要依赖别的库
module: {
  noParse: /jquery|lodash/, // 正则表达式
  // 或者使用函数
  noParse(content) {
    return /jquery|lodash/.test(content)
  },
}

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: "1",
    EXPRESSION: "1+2",
    COPYRIGHT: {
        AUTHOR: JSON.stringify("测试11")
    }
})

  // 使用moment的时候  所有的语言包可以引入了 给可以给他忽略 在手动引入所需要的语言 -->
  // js中
  import moment from 'moment';
  //手动引入所需要的语言
  import 'moment/locale/zh-cn';

  let webpack = require('webpack')
  plugins:[
    new webpack.IgnorePlugin('/\.\/locale/',/moment/)
  ]

"build:dev": "webpack  --env=development",
"build:prod": "webpack  --env=production"

// webpack.config.js
module.exports = (env,argv)=>({
  mode:env,//动态设置环境变量
  optimization: { // 这里放优化的内容
    // 优化打包 如果是生产环境就压缩 否则不压缩
    minimizer:env==='production'?[ // 表示放优化的插件
      new TerserPlugin({
        parallel: true, // 开启多进程并进行压缩
        cache: true, // 开启缓存
      }),
      new OptimizeCSSAssetsPlugin({

      }),
    ]:[],
  },
})
// 同时在js内可以获取到
console.log('===',process.env.NODE_ENV)

// webpack/webpack.client.js
let htmlPluginWebpack = require('html-webpack-plugin')
let path = require('path')
let {
  smart
} = require('webpack-merge')
let base = require('./webpack.config')

module.exports = smart(base, {
  entry: {
    client: path.join(__dirname, '../src/client.js')
  },
  mode: "production",
  plugins:[
    new htmlPluginWebpack({
      template: path.join(__dirname, '../src/index.html'),
      filename: 'index.html'
    })
  ]
})

const express = require('express')
const app = express()
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackOptions = require('./webpack.config')
webpackOptions.mode = 'development'
// compiler 代表整个编译对象
const compiler = webpack(webpackOptions) 
/**
 * 中间件做了什么 compiler.run
 * 1、启动编译 compiler.run
 * 2、使用一个中间件,用来响应客户端对打包后的文件请求
 */
app.use(webpackDevMiddleware(compiler,{}))
app.listen(3000)

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlWebpackPlugins=[];
const glob = require('glob');
const entry={};
const entryFiles = glob.sync('./src/**/index.js');
entryFiles.forEach((entryFile,index)=>{
    let entryName = path.dirname(entryFile).split('/').pop();
    entry[entryName]=entryFile;
    htmlWebpackPlugins.push(new HtmlWebpackPlugin({
        template:`./src/${entryName}/index.html`,
        filename:`${entryName}/index.html`,
        chunks:[entryName],
        inject:true,
        minify:{
            html5:true,
            collapseWhitespace:true,
            preserveLineBreaks:false,
            minifyCSS:true,
            minifyJS:true,
            removeComments:false
        }
    }));
}); 

module.exports={
    entry,
    plugins: [
        //other plugins
        ...htmlWebpackPlugins
    ]
}

plugins:[
  new FriendlyErrorsWebpackPlugin()
]

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports =smw.wrap({
});

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
      generateStatsFile: true, // 是否生成stats.json文件
    })  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
  ]
}

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

library:'xxx',// 导出库的名称
libraryTarget:'var',// 以何种方式导出
libraryExport:'default'// 导出那种属性

// src/index.js
// 单个导出用commonjs libraryExport设置为导出的名字
export function add(a,b){
  return a+b
}

export function minus(a,b){
  return a-b
}
export function multipty(a,b){
  return b*a
}
export function divide(a,b){
  return a/b
}
// 整体导出用commonjs2  libraryExport设置为 default
export default {
  add,
  minus,
  multipty,
  divide
}
// index.js 是package.json main对应的字段 别人用的入口

if(process.env.NODE_ENV === 'production'){
  module.exports = require('./dist/index.min.js')
}else{
  module.exports = require('./dist/index.js')
}

// 将第三方文件打包出来
const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {
  mode:'development',
  entry:{
    react:['react','react-dom']
  },// 希望把这些第三方库文件进行单独打包,就可以提高主体文件的打包速度
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].dll.js',// 打包出来一个文件react.dll.js
    libraryTarget:'var',// 默认是var 这个全局变量,如果以这种方式导出的话,只能用脚本的方式进行全局访问
    library:'_dll_[name]'//指定 文件导出的名字
  },
  module:{
  },
  plugins:[
    new DllPlugin({
      name:'_dll_[name]',// 这个与library 对应一致
      path:path.resolve(__dirname,'dist','[name].manifest.json')
    })
  ]
}
// 在配置webpack引入
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
new DllReferencePlugin({
  manifest:path.resolve(__dirname,'dist','react.manifest.json')
}),

// 在入口文件 scrpit标签引入
  <script src="../dist//react.dll.js"></script>

  "presets":[
      ["@babel/preset-env",{"modules":true}],//转译 ES6 ES7
      "@babel/preset-react"//转译JSX语法
    ],

// 用法
// 1、没有导入和使用
function func1(){
  return 'func1';
}
function func2(){
     return 'func2';
}
export {
  func1,
  func2
}
import {func2} from './functions';
var result2 = func2();
console.log(result2);
//2、代码不会被执行，不可到达
if(false){
 console.log('false')
}
//3、代码执行的结果不会被用到
import {func2} from './functions';
func2();
//4、代码中只会影响死变量，只写不读
var aabbcc='aabbcc';
aabbcc='eeffgg';

  "dev": "set NODE_ENV_XX=xxx&&webpack-dev-server --config webpack.base.js",

new webpack.DefinePlugin({
  TEST:JSON.stringify(process.env.NODE_ENV_SS)
}),

//  %~dp0 是指当前的目录
// 他会去找 _webpack@4.41.2@webpack\bin\webpack.js
@SETLOCAL

@IF EXIST "%~dp0\node.exe" (
  @SET "_prog=%~dp0\node.exe"
) ELSE (
  @SET "_prog=node"
  @SET PATHEXT=%PATHEXT:;.JS;=;%
)

"%_prog%"  "%~dp0\..\_webpack@4.41.2@webpack\bin\webpack.js" %*
@ENDLOCAL

// 此文件可以单独 运行 他会执行打包
// 执行打包的核心 ..\_webpack@4.41.2@webpack\bin\webpack.js
const path = require("path");
const pkgPath = require.resolve(`webpack-cli/package.json`);
// eslint-disable-next-line node/no-missing-require
const pkg = require(pkgPath);
// eslint-disable-next-line node/no-missing-require
require(path.resolve(
  path.dirname(pkgPath),//webpack-cli
  "./bin/cli.js"// webpack-cli/./bin/cli.js 这个是一切打包的入口 打断点就在这儿
  // pkg.bin['webpack-cli']
));

// webpack-cli核心打包逻辑
const webpack = require('webpack')
const config = require('../webpack.config.js')
let compiler = webpack(config)
debugger;
compiler.run((err,stats)=>{ 
  console.log(err)
  /*
    返回的是主要含有modules、chunks和assets三个属性值的对象。
    entries 这里放的是入口模块
    chunks 编译出来了几个代码
    modules 编译出来的模块
    assets key 是文件的名称 值是文件内容
  stats.toJson(内部的) 用来过滤(这是为false)打印的数据 
  */  
  console.log(stats.toJson({
    entries:true,
    chunks:true,
    modules:true,
    assets:true 
  }))
})

// 通过实例获取 构造函数
Object.keys(this.hooks).forEach(hookName=>{
  let hook = this.hooks[hookName]
  if(hook.tap){
    hook.tap('show',()=>{
      let hookType = Object.getPrototypeOf(hook).constructor.name
      console.log(`${hookName} ${hookType} ${hook._args}`)
    })
  }
})

/*
environment    设置node环境变量
afterEnvironment    设置环境变量完成
entryOption   解析入口文件
afterPlugins     挂载插件结束 webpack.config.js会挂载很多插件
afterResolvers    在路径解析器初始化后触发 核心是给一个路径 他就能找到绝对路径
beforeRun  编译前
run  开始编译
normalModuleFactory 创建普通模块工厂  
contextModuleFactory   创建上下文模块工厂
beforeCompile  开始启动编译前
compile  编译
thisCompilation 开始启动编译  
compilation  创建一个 compilation
make  最核心的代码 是从入口文件开始编译
afterCompile  编译完成
shouldEmit  询问是否要生成文件
emit  生成文件
assetEmitted  资源已经生成
afterEmit 生成完成
done 整个编译完成
*/

"generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
// 或者
// npx webpack --profile --json > stats.json

import(/* webpackChunkName:'lazy' */'./lazy.js').then(rs=>{
  console.log(rs.default)
})

// 通过点击按钮 在加载代码
let button = document.createElement('button');
button.innerHTML = '异步加载额外的模块'
button.onclick = function(){
  import(/* webpackChunkName:'lazy' */'./title.js').then(rs=>{
    console.log(rs.default)
  })
}
document.body.appendChild(button)

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    SyncLoopHook,
    AsyncParallelHook,
    AsyncParallelBailHook,
    AsyncSeriesHook,
    AsyncSeriesBailHook,
    AsyncSeriesWaterfallHook
} = require('tapable');

/*
类型	使用要点
Basic	基本型: 不关心监听函数的返回值
Bail	保险式: 只要监听函数中有返回值(不为undefined)，则跳过之后的监听函数
Waterfall	瀑布式: 上一步的返回值交给下一步使用
Loop	循环类型: 如果该监听函数返回true,则这个监听函数会反复执行(从头开始执行)，如果返回undefined则退出循环

1、所有的构造函数都接收一个可选参数,参数是一个参数名的字符串数组
2、参数的名字可以任意填写,但参数数组的长度必须要根据实际接收的参数个数一致
3、如果回调函数的不接收参数,可以传入空数组
4、在实例化的时候传入的数组长度有用,值没有用途
5、执行call,参数个数和实例化时的数组长度有关
6、回调的时候是按先入先出的顺序执行的,先放先执行
*/

//let {SyncHook}=require('tapable');
class SyncHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call() {
        this.tasks.forEach(task=>task(...arguments));
    }
}
let queue = new SyncHook(['name']);
queue.tap('1',function(name){
  console.log(name,1);
});
queue.tap('2',function(name){
  console.log(name,2);
});
queue.tap('3',function(name){
  console.log(name,3);
});
queue.call('ok');

//let {SyncBailHook}=require('tapable');
class SyncBailHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call() {
        // for (let i=0;i<this.tasks.length;i++){
        //     let ret=this.tasks[i](...arguments);
        //     if (ret)
        //         break;
        // }
        let i=0,ret;
        do {
            ret=this.tasks[i++](...arguments);
        } while (!ret);
    }
}
let queue = new SyncBailHook(['name']);
queue.tap('1',function(name){
  console.log(name,1);
  return 'Wrong';
});
queue.tap('2',function(name){
  console.log(name,2);
});
queue.tap('3',function(name){
  console.log(name,3);
});
queue.call('ok');

class SyncWaterfallHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call() {
        let [first,...tasks]=this.tasks;
        tasks.reduce((ret,task)=>task(ret),first(...arguments));

        //this.tasks.reduce((a,b) => (...args) => b(a(...args)))(...arguments);
    }
}
let queue = new SyncWaterfallHook(['name']);
queue.tap('1',function(name,age){
  console.log(name,age,1);
  return 1;
});
queue.tap('2',function(data){
    console.log(data,2);
    return 2;
});
queue.tap('3',function(data){
  console.log(data,3);
});
queue.call('ok',9);

//let {SyncHook}=require('tapable');
class SyncLoopHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call(...args) {    
        this.tasks.forEach(task => {
            let ret=true;
            do {
                ret = task(...args);
            }while(ret == true || !(ret === undefined))
        });
    }
}
let queue = new SyncLoopHook(['name']);
let count = 0;
queue.tap('1',function(name){
    console.log(count++);
    if(count==3){
        return;
    }else{
        return true;
    }
});
queue.call('ok');

//let {AsyncParallelHook}=require('tapable');
class AsyncParallelHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        this.tasks.forEach(task => task(...args));
        callback();
    }
}
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tap('1',function(name){
    console.log(1);
});
queue.tap('2',function(name){
    console.log(2);
});
queue.tap('3',function(name){
    console.log(3);
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

//let {AsyncParallelHook}=require('tapable');
class AsyncParallelHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        let i=0,length = this.tasks.length;
        function done(err) {
            if (++i == length) {
                callback(err);
            }
        }
        this.tasks.forEach(task => {
            task(...args,done);
        });
    }
}
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
    setTimeout(function(){
        console.log(1);
        callback();
    },1000)
});
queue.tapAsync('2',function(name,callback){
    setTimeout(function(){
        console.log(2);
        callback();
    },2000)
});
queue.tapAsync('3',function(name,callback){
    setTimeout(function(){
        console.log(3);
        callback();
    },3000)
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

//let {AsyncParallelHook}=require('tapable');
class AsyncParallelHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let promises = this.tasks.map(task => task());
        return Promise.all(promises);
    }
}
let queue = new AsyncParallelHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(1);
            resolve();
        },1000)
    });

});
queue.tapPromise('2',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2);
            resolve();
        },2000)
    });
});
queue.tapPromise('3',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('sg').then(()=>{
    console.timeEnd('cost');
})

//let {AsyncParallelBailHook} = require('tapable');
class AsyncParallelBailHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        for (let i=0;i<this.tasks.length;i++){
            let ret=this.tasks[i](...args);
            if (ret) {
                return callback(ret);
            }
        }
    }
}
let queue=new AsyncParallelBailHook(['name']);
console.time('cost');
queue.tap('1',function(name){
    console.log(1);
    return "Wrong";
});
queue.tap('2',function(name){
    console.log(2);
});
queue.tap('3',function(name){
    console.log(3);
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

//let {AsyncParallelBailHook} = require('tapable');

class AsyncParallelBailHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let finalCallback=args.pop();
        let count=0,total=this.tasks.length;
        function done(err) {
            if (err) {
                return finalCallback(err);
            } else {
                if (++count == total) {
                    return finalCallback();
                }
            }
        }
        for (let i=0;i<total;i++){
            let task=this.tasks[i];
            task(...args,done);
        }
    }
}
let queue=new AsyncParallelBailHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
    console.log(1);
    callback('Wrong');
});
queue.tapAsync('2',function(name,callback){
    console.log(2);
    callback();
});
queue.tapAsync('3',function(name,callback){
    console.log(3);
    callback();
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

//let {AsyncParallelBailHook} = require('tapable');

class AsyncParallelBailHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
        let args=Array.from(arguments);
        let promises = this.tasks.map(task => task(...arguments));
        return Promise.all(promises);
    }
}
let queue = new AsyncParallelBailHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(1);
            resolve();
        },1000)
    });
});
queue.tapPromise('2',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2);
            reject();
        },2000)
    });
});

queue.tapPromise('3',function(name){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});

queue.promise('sg').then(()=>{
    console.timeEnd('cost');
},err => {
    console.error(err);
    console.timeEnd('cost');
})

let {AsyncSeriesHook} = require('tapable');
class AsyncSeriesHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        for (let i=0;i<total;i++){
            let task=this.tasks[i];
            task(...args,done);
        }
    }
}
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tap('1',function(name){
    console.log(1);
});
queue.tap('2',function(name){
    console.log(2);
});
queue.tap('3',function(name){
    console.log(3);
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

class AsyncSeriesBailHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args = Array.from(arguments);
        let finalCallback = args.pop();
        let index = 0, length = this.tasks.length;
        let next = () => {
            let task = this.tasks[index++];
            if (task) {
                task(...args, next);
            } else {
                finalCallback();
            }
        }
        next();
    }
}
let queue = new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
   setTimeout(function(){
       console.log(1);
   },1000)
});
queue.tapAsync('2',function(name,callback){
    setTimeout(function(){
        console.log(2);
        callback();
    },2000)
});
queue.tapAsync('3',function(name,callback){
    setTimeout(function(){
        console.log(3);
        callback();
    },3000)
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

class AsyncSeriesHook{
    constructor() {
        this.tasks=[];
    }
    tapPromise(name,task) {
        this.tasks.push(task);
    }
    promise() {
         //first是第一个函数， tasks是剩下的函数
        let [first, ...tasks] = this.tasks;
        return tasks.reduce((a, b) => {
            return a.then(() => b());
        }, first(...args));
    }
}
let queue=new AsyncSeriesHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
   return new Promise(function(resolve){
       setTimeout(function(){
           console.log(1);
           resolve();
       },1000)
   });
});
queue.tapPromise('2',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(2);
            resolve();
        },2000)
    });
});
queue.tapPromise('3',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('sg').then(data=>{
    console.log(data);
    console.timeEnd('cost');
});

let {AsyncSeriesBailHook} = require('tapable');
let queue = new AsyncSeriesBailHook(['name']);
console.time('cost');
queue.tap('1',function(name){
    console.log(1);
    return "Wrong";
});
queue.tap('2',function(name){
    console.log(2);
});
queue.tap('3',function(name){
    console.log(3);
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

//let {AsyncSeriesBailHook}=require('tapable');
class AsyncSeriesBailHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        let i=0,size = this.tasks.length;
        let next=(err) => {
            if (err) return  callback(err);
            let task=this.tasks[i++];
            task?task(...args,next):callback();
        }
        next();
    }
}
let queue = new AsyncSeriesBailHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
   setTimeout(function(){
       console.log(1);
       callback('wrong');
   },1000)
});
queue.tapAsync('2',function(name,callback){
    setTimeout(function(){
        console.log(2);
        callback();
    },2000)
});
queue.tapAsync('3',function(name,callback){
    setTimeout(function(){
        console.log(3);
        callback();
    },3000)
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

let {AsyncSeriesBailHook} = require('tapable');
let queue = new AsyncSeriesBailHook(['name']);
console.time('cost');
queue.tapPromise('1',function(name){
   return new Promise(function(resolve,reject){
       setTimeout(function(){
           console.log(1);
           //resolve();
           reject();
       },1000)
   });
});
queue.tapPromise('2',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(2);
            resolve();
        },2000)
    });
});
queue.tapPromise('3',function(name,callback){
    return new Promise(function(resolve){
        setTimeout(function(){
            console.log(3);
            resolve();
        },3000)
    });
});
queue.promise('sg').then(err=>{
    console.log(err);
    console.timeEnd('cost');
},err=>{
    console.log(err);
    console.timeEnd('cost');
});

let {AsyncSeriesWaterfallHook} = require('tapable');
let queue = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
queue.tap('1',function(name,callback){
    console.log(1);
});
queue.tap('2',function(data){
    console.log(2,data);
});
queue.tap('3',function(data){
    console.log(3,data);
});
queue.callAsync('sg',err=>{
    console.log(err);
    console.timeEnd('cost');
});

//let {AsyncSeriesBailHook}=require('tapable');
class AsyncSeriesWaterfallHook{
    constructor() {
        this.tasks=[];
    }
    tapAsync(name,task) {
        this.tasks.push(task);
    }
    callAsync() {
        let args=Array.from(arguments);
        let callback=args.pop();
        let i=0,size = this.tasks.length;
        let next=(err,data) => {
            if (err) return  callback(err);
            let task=this.tasks[i++];
            if (task) {
                if (i==0) {
                    task(...args,next);
                } else {
                    task(data,next);
                }

            } else {
                callback(err,data);
            }
        }
        next();
    }
}
let queue = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
queue.tapAsync('1',function(name,callback){
   setTimeout(function(){
       console.log(1);
       callback(null,1);
   },1000)
});
queue.tapAsync('2',function(data,callback){
    setTimeout(function(){
        console.log(2);
        callback(null,2);
    },2000)
});
queue.tapAsync('3',function(data,callback){
    setTimeout(function(){
        console.log(3);
        callback(null,3);
    },3000)
});
queue.callAsync('sg',(err,data)=>{
    console.log(err,data);
    console.timeEnd('cost');
});

let {AsyncSeriesWaterfallHook} = require('tapable');
class AsyncSeriesWaterfallHook {
   constructor() {
       this.tasks = [];
   }
   tapPromise(name, task) {
       this.tasks.push(task);
   }
   promise(...args) {
       //first是第一个函数， tasks是剩下的函数
       let [first, ...tasks] = this.tasks;
       return tasks.reduce((a, b) => {
           return a.then((data) => b(data));
       }, first(...args));
   }
}
let queue = new AsyncSeriesWaterfallHook(['name']);
console.time('cost');
queue.tapPromise('1', function (name) {
   return new Promise(function (resolve) {
       setTimeout(function () {
           console.log(name, 1);
           resolve(1);
       }, 1000);
   });
});
queue.tapPromise('2', function (data) {
   return new Promise(function (resolve) {
       setTimeout(function () {
           console.log(data, 2);
           resolve(2);
       }, 2000);
   });
});
queue.tapPromise('3', function (data) {
   return new Promise(function (resolve) {
       setTimeout(function () {
           console.log(data, 3);
           resolve(3);
       }, 3000);
   });
});
queue.promise('sg').then(err => {
   console.timeEnd('cost');
});

 const {Tapable,SyncHook} = require("tapable");
 const t = new Tapable();
 t.hooks = {
     myHook: new SyncHook()
 };
 let called = 0;
 t.plugin("my-hook", () => called++);
 t.hooks.myHook.call();
 t.plugin("my-hook", () => called += 10);
 t.hooks.myHook.call();
 console.log(called);

 // 同步
let {SyncHook, SyncBailHook,SyncWaterfallHook,} = require('tapable')

class Lesson1{
 constructor(){
   this.hooks = {
     // 必须传递一个值过去
     arch:new SyncHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tap('node',function(name){
     console.log('node',name)
   }),
   this.hooks.arch.tap('react',function(name){
     console.log('react',name)
   })
 }
 start(...args){
   this.hooks.arch.call(...args)
 }
}

let l = new Lesson1();
l.tap() //注册这两个事件
l.start('xxxxxxxx') //启动钩子


// 阻塞
class Lesson2{
 constructor(){
   this.hooks = {
     arch:new SyncBailHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tap('node',function(name){
     console.log('node',name)
     // return '想停止学习'
     //如是返回 undefined 就继续执行
   }),
   this.hooks.arch.tap('react',function(name){
     console.log('node',name)
   })
 }
 start(...args){
   this.hooks.arch.call(...args)
 }
}

let l = new Lesson2();
l.tap() //注册这两个事件
l.start('xx') //启动钩子

// 瀑布
class Lesson3{
 constructor(){
   this.hooks = {
     arch:new SyncWaterfallHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tap('node',function(name){
     console.log('node',name)//xx
     return '想停止学习'
     //如是返回 undefined 就继续执行
   }),
   this.hooks.arch.tap('react',function(name){
     console.log('node',name)//想停止学习
   })
 }
 start(...args){
   this.hooks.arch.call(...args)
 }
}

let l = new Lesson4();
l.tap() //注册这两个事件
l.start('xx') //启动钩子


class Lesson{
 constructor(){
   this.index= 0;
   this.hooks = {
     arch:new SyncLoopHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tap('node',function(name){
     console.log('node',name)
     return ++ this.index === 3? 'undefined' :'随便'
     //如是返回不是undefined 就一直循环 
   })

 }
 start(...args){
   this.hooks.arch.call(...args)
 }
}

let l = new Lesson4();
l.tap() //注册这两个事件
l.start('xx') //启动钩子

// 异步 并行钩子 需要等待所有的并发异步事件执行后在执行回调方法
// 注册方法 分为 tap/tapAsync 
let {AsyncParallelHook,AsyncSeriesHook} = require('tapable')
class Lesson1{
 constructor(){
   this.index= 0;
   this.hooks = {
     arch:new AsyncParallelHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tapAsync('node',(name,cb)=>{
    setTimeout(()=>{
      console.log('node',name)
      cb()
    },1000)
   })
 }
 start(...args){
   this.hooks.arch.callAsync(...args,function(w){
     console.log('end')
   })
 }
}

let l = new Lesson2();
l.tap() //注册这两个事件
l.start('xx') //启动钩子

// 异步串行
class Lesson{
 constructor(){
   this.index= 0;
   this.hooks = {
     arch:new AsyncParallelHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tapPromise('node',(name)=>{
    return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       console.log('node',name)
       resolve()
     },1000)
    })
   })

 }
 start(...args){
   this.hooks.arch.promise(...args).then(()=>{
     console.log('end')
   })
 }
}

let l = new Lesson2();
l.tap() //注册这两个事件
l.start('xx') //启动钩子

class Lesson3{
 constructor(){
   this.index= 0;
   this.hooks = {
     arch:new AsyncSeriesHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tapPromise('node',(name)=>{
    return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       console.log('node',name)
       resolve()
     },1000)
    })
   })

 }
 start(...args){
   this.hooks.arch.promise(...args).then(()=>{
     console.log('end')
   })
 }
}

let l = new Lesson3();
l.tap() //注册这两个事件
l.start('xx') //启动钩子

// AsyncSeriesWaterfallHook 异步
class Lesson4{
 constructor(){
   this.index= 0;
   this.hooks = {
     arch:new AsyncSeriesWaterfallHook(['name'])
   }
 }
 tap(){// 注册监听函数
   this.hooks.arch.tapPromise('node',(name)=>{
    return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       console.log('node',name)
       resolve('1')
     },1000)
    })
   })
   this.hooks.arch.tapPromise('react',(name)=>{
     return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        console.log('react',name)
        resolve()
      },1000)
     })
    })
 }
 start(...args){
   this.hooks.arch.promise(...args).then(()=>{
     console.log('end')
   })
 }
}

let l = new Lesson4();
l.tap() //注册这两个事件
l.start('xx') //启动钩子