var sass = require('node-sass')
sass.render(
  {file:scss_filename,[,option...]},
  function(err,result){/*...*/}
)

module.exports = function() {
  return 'a'
}
var a = require('./a')

export default function() {
  return 'a'
}
import { default as a } from './a'

function compiler(input) {
  let tokens = tokenizer(input)
  let ast = parser(tokens)
  let newAst = transformer(ast)
  let output = codeGennerator(newAst)
  return output
}

[1,2,3].map((n)=>n+1) => [1,2,3].map(function(n){
                                return n+1
                            })

Array.from(new Set([1, 2, 3]))[(1, [2, 3], [4, [5]])].flat(2)
Promise.resolve(32).then((x) => console.log(x))

function square(n: number): number {
  return n + n
}
// ------transformation------
function square(n) {
  return n + n
}

// 1. 箭头函数
;(a, b, c) => a + b + c
// 2. Class类
class A {}
// 3. ES模块
import * as ext from 'fs-ext'

// 1. promise
new Promise().then()
//2. Object.keys
Object.keys({ a: 1 })[
  // 3. [].inculdes
  (1, 2, 3)
].includes(2)

module.exports = function() {
  return {
    plugins: ['pluginA', 'pluginB', 'pluginC'],
  }
}

const bable = require('@babel/core')
babel.transform(code, options, function() {
  result // =>{code,map,ast}
})

module:{
  rules:[
    test:/\.m?js$/,
    exclude:/(node_modules | bower_components)/,
    use:{
      loader:'babel-loader',
      options:{
        presets:['@bable/preset-env']
      }
    }
  ]
}

module.exports = {
  // "@babel/preset-env" ,下面配置的是简写，如果工程配置中找不到包，可能是被简写了
  presets: ['@babel/env'],
  // same as "@babel/plugins-transform-arrow-functions"
  plugins: ['@babel/transform-arrow-function'],
}

// 以下三种配置方式等价
module.exports = {
  plugins: [
    'pluginA',
    ['pluginA'],
    ['pluginA', {}], // 如果plugin配置成数组，第一项是插件名称，第二项是配置
  ],
}

module.exports = {
  plugins: [
    [
      'transform-async-to-module-method',
      {
        module: 'bluebird',
        method: 'coroutine',
      },
    ],
  ],
}

module.exports = () => ({
  presets: ['@babel/preset-env'],
  plugins: [['@babel/plugin-proposal-class-properties', { loose: true }], '@babel/plugin-proposal-object-rest-spread'],
})

import 'core-js/stable'
import 'regenerator-runtime/runtime'

import 'core-js/stable'

// ------------------------

import 'core-js/modules/es.array.unscopables.flat'
import 'core-js/modules/es.array.unscopables.flat-map'
import 'core-js/modules/es.object.form-entries'
import 'core-js/modules/web.immediate'

// a.js
var set =new Set([1,2,3])

// 转换后
import 'core-js/module/es.array.iterator';
import 'core-js/modules/es.object.to-string';
import 'core-js/modules/es.set';
var set = net Set([1,2,3])

export class Animal {
  makeSound(){
    console.log('hi')
  }
}

//  ----------------------------

"use strict"
require("core-js/modules/es6.object.define-property")
function _classCallCheck(instance,constructor){//....}
function _defineProperties(target,props){//....}
function _createClass(Constructor,protoProps,staticProps){//....}

var _classCallCheck2 = _interopRequireDefault(require('@babel/runtime/helpers/classCallCheck'))
var _classCallClass2 = _interopRequireDefault(require('@babel/runtime/helpers/createClass'))

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
      },
    ],
  ],
  plugins: ['@babel/plugin-proposal-class-properties', ['@babel/plugin-transform-runtime']],
}

export default function() {
  return {
    visitor: {
      Indentifier(path) {
        const name = path.node.name
        path.node.name = name
          .split('')
          .reverse()
          .join('')
      },
    },
  }
}

function square() {
  return n * n
}

{
  type:"FunctionDeclaration",
  id:{.....},
  params:[......]
  body:{.....}
}

{
  type:"FunctionDeclaration",
  name:...
}

{
  type:"FunctionDeclaration",
  operator:......,
  left:{......},
  right:{...}
}

const MyVisitor = {
  Indentifier: {
    enter() {
      console.log('Entered')
    },
    exit() {
      console.log('EXited')
    },
  },
}

{
  type:"FunctionDeclaration",
  id:{
    type:"Identifier",
    name:"square"
  }
  ......
}
// path拿到父节点
{
  "parent":{
    "type":"FunctionDeclaration",
    "id":{}
    .....
  },
  "node":{
    "type":"Identifier",
    "name":"square"
  }
}

{
  plugins:[
    ["my-plugin",{
      "options":true,
      "options":false
    }]
  ]
}
// babel中通过state拿到配置参数
{
  visitor:{
    FunctionDeclartion(path,state){
      console.log(state.opts)
      // {option1:true,option2:false}
    }
  }
}

export default function(babel) {
  // babel的一些工具方法
  const { type: t, template } = babel
  return {
    name: 'a-demo-plugin',
    visitor: {
      Indentifier(path, state) {},
      ASTNodeTypeHere(path, state) {},
    },
  }
}

foo?.bar
// --------------- 把上面的转换成下面的
foo == null ? void 0 : foo.bar

// foo?.bar
// foo==null?void 0: foo.bar
const template = require('@babel/template').default
module.exports = function OptionlChainingPlugin(babel) {
  return {
    name: 'optional-chaining-plugin',
    visitor: {
      // 通过刚刚的对比，我们知道就是替换OptionaMembeExpression这个表达式
      OptionaMembeExpression(path, state) {
        // path.replaceWith() 替换为新的节点
        // path.remove() // 删除当前节点
        // path.skip() //跳过子节点`
        path.repalceWith(
          // 用 @babel/types这个包构造ConditionalExpression节点，但是这个包已经挂载到了bable上了，所以可以直接用babel访问
          // conditionalExpression具体参数可以访问babel官网查看，t.conditionalExpression(test, consequent, alternate)
          // 可以从对比图中看出，第一个参数test类型是BinaryExpression，是一个二元判断，也需要我们用babel.types构造
          babel.types.conditionalExpression(
            // 从babel文档中查看BinaryExpression所需要的的参数t.binaryExpression(operator, left, right)
            // operator就是 ==   left(左值)就是foo  right(右值)就是null
            babel.types.BinaryExpression('==', babel.types.identifier(path.node.object.name), babel.types.nullLiteral()),
            template.expression('void 0'), //将字符串转换成ast
            babel.types.memberExpression(
              babel.types.identifier(path.node.object.name), // 对象名称
              babel.types.identifier(path.node.property.name) // 属性名称
            )
          )
        )
      },
    },
  }
}

const {
  SyncHook, // 同步钩子
  SyncBailHook, // 同步熔断钩子
  SyncWaterfallHook, // 同步流水钩子
  SyncLoopHook, // 同步循环钩子
  AsyncParalleHook, // 异步并发钩子
  AsyncParallelBaillHook, // 异步并发熔断钩子
  AsyncSeriesHook, // 异步串行钩子
  AsyncSeriesBailHook, // 异步串行熔断钩子
  AsyncSeriesWaterfallHook, // 异步串行流水钩子
} = require('tapable')

const { SyncHook } = require('tapable')
// 创建实例
const syncHoook = new SyncHook(['name', 'age'])

// 注册事件
syncHook.tap('1', (name, age) => {
  console.log('1', name, age)
})
syncHook.tap('2', (name, age) => {
  console.log('2', name, age)
})
syncHook.tap('3', (name, age) => {
  console.log('3', name, age)
})

syncHook.call('Harry Potter', 18)

// output:
// 1 Harry Potter 18
// 2 Harry Potter 18
// 3 Harry Potter 18

class Compiler extends Tapable {
  constructor(context) {
    super()
    // 实例一系列tapable hook
    this.hooks = {
      shouldEmit: new SyncBailHook(['compilation']),
      done: new AsyncSeriesHook(['stats']),
      beforeRun: new AsyncSeriesHook(['compiler']),
      run: new AsyncSeriesHook(['compiler']),
      emit: new AsyncSeriesHook(['compilation']),
      afterEmit: new AsyncSeriesHook(['compilation']),
    }
  }
}

class SourceMapDevToolPlugin {
  // 在我们实例化的`Compiler`对象上注册每个钩子的回调函数
  apply(compiler) {
    compiler.hooks.compilation.tap('SourceMapDevToolPlugin', (compilation) => {
      compilation.hooks.afterOptimizeChunkAssets.tap(xxx, () => {
        context, chunks
      })-
    })
  }
}

module.exports={
  entry:'./path/to/my/entry/files.js'
}

module.exports={
  entry:{
    app:'./src/app.js',
    adminApp:'./src/adminApp.js'
  }

const path = require('path')
module.exports = {
  entry: './path/to/my/entry/files.js',
  output: {
    path: path.resolve(__dirname, dist),
    fileName: 'my-fist-webpack-bundle.js',
  },
}

const path = require('path')
module.exports = {
  entry: './path/to/my/entry/files.js',
  output: {
    path: path.resolve(__dirname, dist),
    fileName: 'my-fist-webpack-bundle.js',
  },
  module: {
    reules: [
      {
        test: '/.txt$/',
        use: 'raw-loader',
      },
    ],
  },
}

const HtmlWebpackPlugin = require('Html-webpack-plugin')
const path = require('path')
module.exports = {
  entry: './path/to/my/entry/files.js',
  output: {
    path: path.resolve(__dirname, dist),
    fileName: 'my-fist-webpack-bundle.js',
  },
  module: {
    reules: [
      {
        test: '/.txt$/',
        use: 'raw-loader',
      },
    ],
  },
  plugins: [
    // HtmlWebpackPlugin 为应用生成一个html文件，并且自动注入所有生成的js bundle，这是loader所做不到的
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
}

module.exports = {
  mode: 'production', // 'node' | 'development' 'production'
}

module.exports = {
  entry: './src/index.js',
}

// 要为每个入口命名
module.exports = {
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  },
}

module.exports={
  output:{
  // 输出bundle文件名，hash是wepack使用散列算法生成一段字符串，这样每次打包的文件名都不样
  // 这样浏览器即使缓存，每次也能加载最新代码
    filename:'[name].[hash].bundle.js'，
    // 输出的 chunk文件名，一般是非entry打包出的文件
    chunkFilename：'[id].js'
  }
}

// css/rest.css
body {
  margin:0px;
}
// app.js
import './css/reset.css'

module.exports={
  entry:path.resolve(__dirname,'src/index.js'),
  output:{
    filename:path.resolve(__dirname,'dist/'
  }
  mode:"develoment",
  plugins:[....],
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  }
}

module.exports={
  entry:path.resolve(__dirname,'src/index.js'),
  output:{
    filename:path.resolve(__dirname,'dist/'
  }
  mode:"develoment",
  plugins:[....],
  module:{
    rules:[
      {
        test:/\.css$/,
        use:[{
          loader:'style-loader',
        },
        {
          loader:'css-loader',
        },
        {
          loader:'sass-loader',
          options:{sourceMap:true}
        }],
        exclude:'/node_modules/'
      }
    ]
  }
}

// loader
{
  test: /\.scss$/, MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
}

// plugin
// 抽取css代码
new MiniCssExtractPlugin({
  filename: '[name].css?v=[contenthash]',
})

module.exports={
  plugins:[
    new HtmlWebpackPlugin({
      // 输出的文件名
      filename:'index.html'
      // 模块文件的路径
      template: path.resolve(__dirname,'src/index.html'),
      // 配置生成页面的标题
      title:'webpack-主页'
    })
  ]
}

module: {
  rules: [
    {
      test: /\.(js | jsx)$/,
      use: 'babel-loader',
      include: path.resolve(__dirname, 'src'),
    },
  ]
}

module.exports = {
  mode: 'development', // none  | production | development
}

module.exports = {
  devServer: {
    contentBase: __dirname + 'dist',
    compress: true,
    port: 9000,
  },
}

module.exports = {
  devServer: {
    contentBase: __dirname + 'dist',
    compress: true,
    port: 9000,
    // 开启HMR
    hot: true,
  },
}

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
}

index.bundle.js
another.bundle.js

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  // 在webpack4 中将splitChunks统一到了optimization中
  optimization: {
    // 查询相关用法，不是插询optimization，而是查询SplitChunksPlugin这个插件
    splitChunks: {
      chunks: 'all',
    },
  },
}

// 动态导入是异步的
import(/*webpackChunkName:loaash*/,'lodash').then(({default:_})=>{
})
.catch(err=>{
})

// 同步的Loader
module.exports = (input) => input + input
// 异步的Loader
module.exports = function() {
  const callback = this.async()
  callback(null, input + input) //返回值用callback传递出去
}

const loaderUtils = require('loader-utils')
module.exports = function(source) {
  // 获取配置
  const options = loaderUtils.getOptions(this)
  const result = source.replace('word', options.name)
  return result
}

const loaderUtils = require('loader-utils')
module.exports = function(input) {
  const { text } = loaderUtils.getOptions(this)
  return input + input
}
/*
 remainingReg 是loader链中排在当前这个loader后面所有的loader以及资源文件组成的一个链接，这个链接我们可以理解为一个路径
 在所有的loader处理完毕后，我们可以在webpack中使用一个特殊的require函数，去require这个路径，从而得到当前loader后所有的loader的处理结果。

 precedingReq 是loader链中排在当前这个loader前面所有的loader以及资源文件所组成的链接

 input 是一个对象，各个loader把共享的数据挂载这个对象上，如果pitch返回一个值；那么webpack就会跳过余下的loader pitch和execute的过程，
 也就是说pitch返回阻断了后续loader的执行

*/
module.exports.pitch = function(remainingReg, precedingReq, input) {
  console.log(`
        remainingReg request :${remainingReg}
        precedingReq request :${precedingReq}
        Input: ${JSON.stringify(input, null, 2)}
    `)
  return 'pitched'
}

const fs = require('fs')
const path = require('path')
const { runLoaders } = require('loader-runner') //可以创建一个简单loader调试环境

runLoaders(
  {
    resource: './demo.txt',
    loaders: [path.resolve(__dirname, './loaders/demo-loader')],
    readResource: fs.readFile.bind(fs),
  },
  (err, result) => (err ? console.error(err) : console.log(result))
)

const path = require('path')
const DemoPlugin = require('./plugins/demo-plugin.js')
const PATHS = {
  lib: path.join(__dirname, 'app', 'shake.js'),
  build: path.join(__dirname, 'build'),
}
module.exports = {
  entry: {
    lib: PATHS.lib,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  plugins: [new DemoPlugin()],
}

module.exports = class DemoPlugin {
  constructor() {
    this.options = options
  }
  apply(compiler) {
    compiler.plugin('emit', (compilation, cb) => {
      cb()
    })
  }
}

const webpackRources = require('webpack-sources')
class WebpackSizePlugin {
  constructor(options) {
    this.options = options
    this.PLUGIN_NAME = 'WebpackSizePlugin'
  }
  apply(complier) {
    const outputOptions = complier.options.output // 拿到output配置，拿到文件最终的输出路径是什么
    // 我们插件的目的是统计出打包出来文件的大小，所以我们需要注册到打包结果后的hooks上，由于要输出json，所以要在输出硬盘之前
    complier.hooks.emit.tap(
      this.PLUGIN_NAME, // 插件的名称
      (compilation) => {
        // 在这个函数中可以读取和操作本次编译的结果
        const assets = compilation.assets // 所有的编译结果都可以通过compilation.assets拿到
        const buildSize = {}
        const files = Object.keys(assets)
        let total = 0
        for (let file of files) {
          const size = assets[file].size() // 拿到字符数
          buildSize[file] = size
          total += size
        }
        console.log('Build Size', buildSize)
        console.log('Total Size', total)
        buildSize.total = total
        // 想要webpack生成一个文件，只需这个文件以键值对的形式加入到assets对象中，那么在打包执行完毕之后，webpack会自动帮我们生成
        assets[outputOptions.publicPath + '/' + (this.options ? this.options.fileName : 'build-size.json')] = new webpackRources.RawSource(JSON.stringify(buildSize, null, 4))
        // assets对象中文件的内容，也就是说assets对象中每一项的值它是一个RawSource对象，而不是一个普通的字符串，上面要输出rawsource对象
      }
    )
  }
}

plugins: [new WebpackSizePlugin({ fileName: 'size.json' })]

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
      generateStatsFile: true, // 是否生成stats.json文件
    }),
  ],
}

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack5-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports = smw.wrap({
  mode: "development",
  devtool: 'source-map',
  ...
});

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const notifier = require('node-notifier')

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  context: process.cwd(),
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin({
      onErrors: (severity, errors) => {
        const error = errors[0]
        notifier.notify({
          title: 'Webpack编译失败',
          message: severity + ': ' + error.name,
          subtitle: error.file || '',
        })
      },
    }),
  ],
}