module.exports = {
  //...
  resolve: {
    // 更多配置规则https://webpack.js.org/configuration/resolve/#resolve-alias
    alias: {
      app: path.resolve(__dirname, 'src/app/'),
    },

    // 一个模块可能适用于多端(比如浏览器，或者node端)，所以当引入一个模块时，也会针对不同的环境提供对应的文件
    // 而这里的字段是和要引入的包里对应package.json对应的。
    aliasFields: ['browser']

    //如果为真，则不允许使用无扩展名文件
    enforceExtension: false
    // 是否要求对模块使用扩展(例如加载器)，默认fasle
    enforceModuleExtension: false,
    // 使用这个将覆盖默认选项，因此为防止错误，最好加个"*"
    // 自动解析某些扩展，默认情况如下
    extensions: ['.wasm', '.mjs', '.js', '.json'],
    // 默认如下，当从npm包里导入时，如导入d3，这个选项将对应d3包里的package.json里该字段
    // 感觉有点类似aliasFields？
    mainFields:['browser', 'module', 'main']
    // 告诉webpack在解析模块时应该搜索什么目录，默认为node_modules
    modules:['node_modules']
    // 如果想早于node_modules,只需在数组前加入即可，如
    modules:[path.resolve(__dirname, 'src'),'node_modules']

    // 启用，会主动缓存模块，但并不安全。传递 true 将缓存一切。默认
    unsafeCache: true

    // 与上面resolve属性集相同，但仅用于解析webpack的loader，默认如下
    resolveLoader: {
      modules: [ 'node_modules' ],
      extensions: [ '.js', '.json' ],
      mainFields: [ 'loader', 'main' ]

      // 这不是resolveLoader的默认值
      // 从webapck2开始强烈建议使用完整的loader名，如example-loader
      // 如果不想完整，则可配置如下
      moduleExtensions: [ '-loader' ]
    }
  }
}

const path = require('path')

module.exports = {
  // 默认是production，代码压缩丑化
  mode: 'development',
  entry: {
    mainName: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

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

const path = require('path')
module.exports = {
  // 默认是production，代码压缩丑化
  mode: 'development',
  entry: './src/index.js',
  output: {
    // [hash].[contenthash].js也会报错，
    // 若开启HMR，关闭后重试或许可解决(只需注释HMR模块插件)
    filename: '[hash].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
}
// 错误信息
// ERROR in chunk main [entry]
// [hash][chunkhash].js
// Cannot use [chunkhash] or [contenthash] for chunk in '[hash][chunkhash].js' (use [hash] instead)

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    }
  ]
}

// 插件使用：https://webpack.docschina.org/plugins/extract-text-webpack-plugin/
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        // ExtractTextPlugin.extract(options: loader | object)
        use: ExtractTextPlugin.extract({
          // 应用于没有被提取的css
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  // 注册插件
  plugins: [
    // 实例化插件,ExtractTextPlugin(option: filename | object)
    new ExtractTextPlugin('style.css')
  ]
}

{
  loader: "css-loader",
  option: {
    // 对于以/开头的url，默认行为是不转译，即url(/image.png) => url(/image.png)
    // 若设置了root，则会添加到url前面，然后再转译。如：url(/image.png) => require('./image.png')
    // 不建议用相对路径
    root: '.',

    // 是否禁用css-loader解析url(),
    // 如果false不解析，则原样输出url的内容，会导致路径错误
    url:true,

    // 遵循与webpack的resolve.alias相同的语法
    // 当使用第三方的样式包时，会非常方便，如下
    alias:{
      "../fonts/bootstrap": "bootstrap-sass/assets/fonts/bootstrap"
    },

    // 要禁用css-loader解析@import，可以设置为false,
    // 禁用之后，@import 方式导入的模块都将失效
    import: true,

    // 是否启用局部作用域css。
    module: true,

    // 默认情况下，css将所有的类名暴露到全局的选择器作用域中。样式可以在局部作用域中
    module: true,

    // 默认情况下，如果模块系统指定，css-loader 将压缩 css
    // 在某些情况下，压缩对于 css 来说是破坏性的，所以如果需要设置，可以向基于 cssnano 的 minifier(cssnano-based minifier) 提供自己的选项
    minimize: true || {/* CSSNano Options */},

    // 默认情况下不启用它们，因为它们会导致运行时的额外开销，并增加了 bundle 大小 (JS source map 不会)。
    sourceMap: false

    // 一般情况下，css样式的类名都是-连接，如果想经过css-loader处理后，使用驼峰，可以设置该选项
    // 如file.css为.class-name {} 可以这样 import { className } from 'file.css';
    camelCase:true
  }
}

createElement('img', { attrs: { src: require('../image.png') }})

module:{
  rules:[
    {
      // 要熟记常用正则的用法
      test: /\.(png|svg|jpe?g|gif)$/,
      // use是数组，子元素可以是字符串，可以是对象
      use: [
        {
          loader: 'file-loader',
          options: {
            name (file){
              // [name] type: String default: file.basename
              // [path] type: String default: file.dirname
              // 这里的[name][path]都是插件提供的
              if(env === 'development'){
                return '[path][name].[ext]'
              }
              // hash默认算法是md5,处理的值是文件内容，意味着不是每次编译都变，因为内容不变
              return '[hash].[ext]'
            }
          }
        }
      ]
    }
  ]
}

// 可以直接这样引入图片，并直接使用
import myImg from './my-img.png'
const newImg = new Image()
newImg.src = myImg
document.appendChild(newImg)

module: [
  {
    test: /\.(png|jpe?g|svg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        option: {
          // 小于10k的转换为dataURL格式
          limit: 10000,
          // 浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档,终端：file xxx查看
          // 由类型与子类型两个字符串中间用'/'分隔而组成
          // 这里是指定要转换成的dataurl的文件子类型，需要用到jimp插件(专门修改资源mime类型)
          mimetype: 'image/png',
          // 大于limit的先经过fallback处理，若无fallback则交由file-loader处理
          fallback: 'responsive-loader'
          //  还可以设置处理的质量
          quality: 85,
          // 可以设置name
          name: '[hash:8].[ext]'
        }
      }
    ]
  }
]

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  }
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: env === 'production'
          ? ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: [ 'css-loader' ]
          })
          : [ 'style-loader', 'css-loader' ]
      },
    ]
  },
  plugins: env === 'production'
    ? [
        new ExtractTextPlugin({
          filename: '[name].css'
        })
      ]
    : []
}

{
  "presets": [
    // 预处理的版本，需要安装对应的插件
    "env",
    // 如果想体验初步规范的新语法，可以增加这个
    // "stage-2"
  ],
}

// 词法分析阶段把字符串形式的代码转换为 令牌(tokens)流
// 每个type有一组属性来描述该令牌流，就是用来说明该令牌流的详细信息
// 分词有一定的规则，也就是将js代码分割成最小的语法单元
[
  { type: { ... }, value: "n", start: 0, end: 1, loc: { ... } },
  { type: { ... }, value: "*", start: 2, end: 3, loc: { ... } },
  { type: { ... }, value: "n", start: 4, end: 5, loc: { ... } },
  ...
]

const HtmlWebpackTemplatePlugin = require('html-webpack-template')
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      // required 必填选项
      inject: false,
      template: HtmlWebpackTemplatePlugin
      // template: './src/index.html' //还可以自定义模板

      // Optional 选填选项
      title: 'output Management',
      filename: 'my-index.html',
      // 还可以增加meta等等标签
      meta: [
        {
          name: 'description',
          content: 'A better default template for html-webpack-plugin.'
        }
      ],
    })
  ]
}

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  plugins: [
    // new CleanWebpackPlugin(paths [, {options}]) 
    // 参数一：paths是数组或字符串，数组的话可以匹配多个
    // 参数二：paths配置相关的配置
    new CleanWebpackPlugin(['dist','build/*.*','web/*.js'],{
      // __dirname脚本执行的目录
      root:  __dirname
    })
  ]
}

module.exports = {
  // devtool有很多选项,这里说几项，详情参考：https://webpack.docschina.org/configuration/devtool

  // 打包出来的文件底部有sourceMappingURL字样，点击错误定位到的是没经处理的源码位置
  devtool: 'source-map'

  // 打包出来的文件底部没有sourceMappingURL字样，点击错误定位到的是压缩后的代码位置
  // 此时dist目录里有map文件
  devtool: 'hidden-source-map'

  // 和上面不同的是，该模式生成的文件不但有sourceMappingURL字样，而且把具体的map文件内容内联在打包的文件里了，而前两者sourceMappingURL的值只是一个地址
  // 注意此时dist目录没有map文件，因为相当于将map文件内敛到chunk里了，但这样会使得打包出来的文件变大
  devtool: 'inline-source-map'
}

// 和entry等同等级
devServer: {
  // 推荐用绝对路径;值为false时表示禁用(此时遍历的目录是？);数组时表示多个目录
  contentBase: path.join(__dirname, "dist"),
  // 当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。
  lazy: true
  // 使用 filename，可以只在某个文件被请求时编译。
  filename:'boundle.js',
  // 在所有响应中添加首部内容：
  headers: {
  "X-Custom-Foo": "bar"
  }
},

if(module.hot){
  // 当更新lazy.js文件后，会在控制台打印module is updated...
  module.hot.accept('./views/lazy',function(){
    console.log('module is updated...');
  })
}

if(module.hot){
  // 此时更新style.css，则不会触发回调。。。猜测是被style-loader拦截了
  module.hot.accept('./views/style.css',function(){
    console.log('css module is updated...');
  })
}

output: {
  filename: '[name].js',
  // 这个只是本地硬盘上的路径
  path: path.resolve(__dirname, 'dist'),
  // 所有通过html-webpack-plugin插件插入到页面的资源，前缀都会添加/spa/,如果是/spa，则是/spaxxx
  // 绝对路径则会拼接上服务名，很少用相对路径
  // 完整的路径如https://www.baidu.com，一般是将资源托管到第三方平台
  publicPath: '/spa/'
}

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')

const app = express()
const config = require('./webpack.config.js')
const compiler = webpack(config)

// 将webpackDevMiddleware插件挂载在express上，用webpack.config.js的配置路径来配置服务器的地址
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}))

app.listen(3000, function(){
  console.log('server is running : http://localhost:3000')
})

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    })
  }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      //  还可这样
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      },

      //  在生产/开发中，构建中使用不同的URL
      'SERVICE_URL': JSON.stringify('https://yuccie.github.io/jsArt')
    })
  ]
});

entry: {
  main:'./src/index.js',
  other:'./src/other.js'
},

// output:{},
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

// output:{},
optimization: {
  splitChunks: {
    //选择哪些块进行优化，值all，async,initial
    // 还可以是函数，返回值将指示是否包含每个块
    // 功能强大，意味着即使在异步与非异步之间也可以共享块
    // 默认async是说按需加载的模块如果满足以下条件就会单独打包
    chunks: 'async',
    // 要生成的块的压缩前最小大小30kb，块如果太小就没必要新生成一个包
    minSize: 30000,
    // 分割前必须共享模块的最小块数(就是有最少多少文件公用它)
    minChunks: 1,
    // 按需加载时的最大并行请求数
    maxAsyncRequests: 5,
    // 一个入口文件中并行请求的最大数量(比如一个入口有多处按需加载的地方)
    maxInitialRequests: 3,
    //抽离出来的包名字分隔符
    automaticNameDelimiter: '~',
    // 为true则根据块及缓存组密钥生成名字。若为字符串，则就是自定义名
    name: true,
    // priority，一个模块可以属于多个缓存组，该优化将优先选择具有较高优先级的缓存组
    // default是默认组，具有负优先级，允许自定义组具有更高优先级
    cacheGroups: {
      // 默认将来自node_modules的块分配到vendors缓存组里
      vendors: {
        // 缓存组选择哪些模块，省略它(''空字符即可)则选择所有模块。
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      // 所有重复引用至少两次的代码分配到default缓存组里
      default: {
        minChunks: 2,
        priority: -20,
        // boolean,如果当前块包含已经从主包中拆分出来的模块，那么它将重用，而不是新生成的模块，可能会影响块的结果文件名
        reuseExistingChunk: true
      }
    }
  }
}

entry: {
  pageA: './src/views/pageA.js',    // 引用a.js  
  pageB: './src/views/pageB.js',    // 引用a.js  引用b.js
  pageC: './src/views/pageC.js'     // 引用a.js  引用b.js
}
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      commons: {
        minSize: 0,
        minChunks: 2,
      }
    }
  }
},

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      commons: {
        // 覆盖上面的all,只能是按需加载的才满足条件
        async:'async',
        minSize: 0,
        minChunks: 2,
      }
    }
  }
},

optimization: {
  splitChunks: {  
    // 增加下面一行即可
    runtimeChunk: "single"
    // 等价于下面代码
    runtimeChunk: {
      name: "manifest"
    }
  }
},

function component() {
  // import规范不允许控制模块的名称或其他属性，因为 "chunks" 只是 webpack 中的一个概念
  // webpack 中可以通过注释接收一些特殊的参数，而无须破坏规定，即如下
  // webpackChunkName：新 chunk 的名称，再看上面打包出来的文件名便懂
  // 参考https://webpack.docschina.org/api/module-methods#import-
  return import(/* webpackChunkName: "lodash" */ 'lodash').then( _ =>{
    var element = document.createElement('div')
    element.innerHTML = _.join(['hello', 'webpack'], ' ')

    return element
  }).catch((err)=>{
    console.log('错误信息为：', err)
  })
}

component().then( component => {
  document.body.appendChild(component);
})

async function component() {
  var element = document.createElement('div')
  const _ = await import(/* webpackChunkName: "lodash" */ 'lodash')
  element.innerHTML = _.join(['hello', 'webpack'], ' ')

  return element
}

component().then( component => {
  document.body.appendChild(component);
})

import(/* webpackPreload: true */ 'ChartingLibrary');

import(/* webpackPrefetch: true */ 'LoginModal');

// 首先要 npm i -D webpack-bundle-analyzer
// 然后配置webpack.base.js，运行一个构建任务即可自动打开一个页面
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

console.log('The print.js module has loaded! See the network tab in dev tools...');
export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
}

import _ from 'lodash'

function component(){
  var ele = document.createElement('div')
  var btn = document.createElement('button')
  var br = document.createElement('br')

  btn.innerHTML = 'Click me and look at the console!'
  ele.appendChild(br)
  ele.appendChild(btn)

  btn.onclick = e => import(/* webpackChunkName: 'print' */ './print').then(module => {
    var print = module.default
    print()
  })
  return ele
}
document.body.appendChild(component())

// manifest.69245d81.js
/******/   // script path function
/******/   function jsonpScriptSrc(chunkId) {
/******/     return __webpack_require__.p + "" + ({"print":"print"}[chunkId]||chunkId) + "." + {"print":"f8def119"}[chunkId] + ".bundle.js"
/******/   }

// 文件名
// print.f8def119.bundle.js

output: {},
optimization: {
  runtimeChunk: 'single'
}

{
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true
      }
    }
  ]
}

// Webpack 的构建流程可以分为以下三大阶段(初始化 -> 编译 -> 输出)：
// 1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
// 2. 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
// 3. 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

// 在每个阶段都会发生很多事件，webpack会把这些事件广播出来供plugin使用。

// 过程一：初始化阶段
// 1. 初始化参数，从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。 这个过程中还会执行配置文件中的插件实例化语句 new Plugin()。
// 2. 实例化compiler，用上一步得到的参数初始化 Compiler 实例，Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置，全局只有一个 Compiler 实例。
// 3. 加载插件，依次调用插件的 apply 方法，让插件可以监听后续的所有事件节点。同时给插件传入 compiler 实例的引用，以方便插件通过 compiler 调用 Webpack 提供的 API。
// 4. environment，开始应用 Node.js 风格的文件系统到 compiler 对象，以方便后续的文件寻找和读取。
// 5. entry-option，读取配置的Entrys，为每个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工作做准备。
// 6. after-plugins，调用完所有内置的和配置的插件的 apply 方法。
// 7. after-resolvers，根据配置初始化完 resolver，resolver 负责在文件系统中寻找指定路径的文件。


// 过程二：编译阶段
// 1. run，启动一次新的编译
// 2. watch-run，和 run 类似，区别在于它是在监听模式下启动的编译，在这个事件中可以获取到是哪些文件发生了变化导致重新启动一次新的编译。
// 3. compile，该事件是为了告诉插件一次新的编译将要启动，同时会给插件带上 compiler 对象。
// 4. compilation，当 Webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被创建。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了很多事件回调供插件做扩展。
// 5. make，一个新的 Compilation 创建完毕，即将从 Entry 开始读取文件，根据文件类型和配置的 Loader 对文件进行编译，编译完后再找出该文件依赖的文件，递归的编译和解析。
// 6. after-compile，一次 Compilation 执行完成。
// 7. invalid，当遇到文件不存在、文件编译错误等异常时会触发该事件，该事件不会导致 Webpack 退出。

// 注意：编译阶段中，最重要的要数 compilation 事件了，
// 因为在 compilation 阶段调用了 Loader 完成了每个模块的转换操作，
// 在 compilation 阶段又包括很多小的事件，它们分别是：
// 1. build-module，使用对应的 Loader 去转换一个模块。
// 2. normal-module-loader，在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析。
// 3. program，从配置的入口模块开始，分析其 AST，当遇到 require 等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。
// 4. seal，所有模块及其依赖的模块都通过 Loader 转换完成后，根据依赖关系开始生成 Chunk。


// 过程三：输出阶段
// 1. should-emit，所有需要输出的文件已经生成好，询问插件哪些文件需要输出，哪些不需要。
// 2. emit，确定好要输出哪些文件后，执行文件输出，可以在这里获取和修改输出内容。
// 3. after-emit，文件输出完毕
// 4. done，成功完成一次完成的编译和输出流程。
// 5. failed，如果在编译和输出流程中遇到异常导致 Webpack 退出时，就会直接跳转到本步骤，插件可以在本事件中获取到具体的错误原因。

// 在输出阶段已经得到了各个模块经过转换后的结果和其依赖关系，并且把相关模块组合在一起形成一个个 Chunk。
// 在输出阶段会根据 Chunk 的类型，使用对应的模版生成最终要要输出的文件内容。

// 输出代码分析
// 为什么bundle.js能直接运行在浏览器中？
// 答：原因在于输出的文件中通过 __webpack_require__ 函数定义了一个可以在浏览器中执行的加载函数来模拟 Node.js 中的 require 语句。

// 为何将很多模块放在一个bundle.js里？
// 答：原因在于浏览器不能像 Node.js 那样快速地去本地加载一个个模块文件，而必须通过网络请求去加载还未得到的文件。 如果模块数量很多，加载时间会很长，因此把所有模块都存放在了数组中，执行一次网络加载。
// __webpack_require__ 函数有优化，加载过的模块不会二次加载。


// 分隔代码的输出
// 异步加载 show.js
import('./show').then((show) => {
  // 执行 show 函数
  show('Webpack');
});

// 上面代码构建后，会输出两个文件，分别是执行入口文件 bundle.js 和 异步加载文件 0.bundle.js。
// 其中 0.bundle.js的内容如下：
webpackJsonp(
  // 在其它文件中存放着的模块的 ID
  [0],
  // 本文件所包含的模块
  [
    // show.js 所对应的模块
    (function (module, exports) {
      function show(content) {
        window.document.getElementById('app').innerText = 'Hello,' + content;
      }

      module.exports = show;
    })
  ]
);

// 1. __webpack_require__.e 用于加载被分割出去的，需要异步加载的 Chunk 对应的文件;
// 2. webpackJsonp 函数用于从异步加载的文件中安装模块。
// 在使用了 CommonsChunkPlugin 去提取公共代码时输出的文件和使用了异步加载时输出的文件是一样的，
// 都会有 __webpack_require__.e 和 webpackJsonp。 原因在于提取公共代码和异步加载本质上都是代码分割。

// loader基础
// 由于 Webpack 是运行在 Node.js 之上的，一个 Loader 其实就是一个 Node.js 模块，这个模块需要导出一个函数。 
// 这个导出的函数的工作就是获得处理前的原内容，对原内容执行处理后，返回处理后的内容。

// 一个最简单的 Loader 的源码如下：
module.exports = function(source) {
  // source 为 compiler 传递给 Loader 的一个文件的原内容
  // 该函数需要返回处理后的内容，这里简单起见，直接把原内容返回了，相当于该 Loader 没有做任何转换
  return source;
};

// 由于 Loader 运行在 Node.js 中，你可以调用任何 Node.js 自带的 API，或者安装第三方模块进行调用：
const sass = require('node-sass');
module.exports = function(source) {
  return sass(source);
};

// loader进阶
// Webpack 还提供一些 API 供 Loader 调用
// 可以获取Loader的options
// 还可以返回其他的数据，比如sourceMap
// loader有同步和异步之分，有些需要通过网络请求，才能得到结果，同步则会阻塞整个构建，导致构建非常缓慢。

// 在转换步骤是异步时，可以：
module.exports = function(source) {
  // 告诉 Webpack 本次转换是异步的，Loader 会在 callback 中回调结果
  var callback = this.async();
  someAsyncOperation(source, function(err, result, sourceMaps, ast) {
      // 通过 callback 返回异步执行后的结果
      callback(err, result, sourceMaps, ast);
  });
};

// 处理二进制数据
// 在默认的情况下，Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串。 但有些场景下 Loader 不是处理文本文件，而是处理二进制文件，
// 例如 file-loader，就需要 Webpack 给 Loader 传入二进制格式的数据。 为此，你需要这样编写 Loader：
module.exports = function(source) {
  // 在 exports.raw === true 时，Webpack 传给 Loader 的 source 是 Buffer 类型的
  source instanceof Buffer === true;
  // Loader 返回的类型也可以是 Buffer 类型的
  // 在 exports.raw !== true 时，Loader 也可以返回 Buffer 类型的结果
  return source;
};
// 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据 
module.exports.raw = true;


// 缓存加速
// 有些转换操作需要大量计算非常耗时，如果每次构建都重新执行重复的转换操作，构建将会变得非常缓慢。
// Webpack 会默认缓存所有 Loader 的处理结果，也就是说在需要被处理的文件或者其依赖的文件没有发生变化时， 是不会重新调用对应的 Loader 去执行转换操作的。
module.exports = function(source) {
  // 关闭该 Loader 的缓存功能
  this.cacheable(false);
  return source;
};

// ResolveLoader
// ResolveLoader 用于配置 Webpack 如何寻找 Loader。 默认情况下只会去 node_modules 目录下寻找，
// 为了让 Webpack 加载放在本地项目中的 Loader 需要修改 resolveLoader.modules。

// 假如本地的 Loader 在项目目录中的 ./loaders/loader-name 中，则需要如下配置：
module.exports = {
  resolveLoader:{
    // 去哪些目录下寻找 Loader，有先后顺序之分
    modules: ['node_modules','./loaders/'],
  }
}
// 加上以上配置后， Webpack 会先去 node_modules 项目下寻找 Loader，如果找不到，会再去 ./loaders/ 目录下寻找。

module.exports = {
  plugins:[
    // 两个参数分别为成功回调和失败回调。
    new EndWebpackPlugin(() => {
      // Webpack 构建成功，并且文件输出以后会执行到这里，在这里可以做发布文件操作
    }, (err) => {
      console.error(err);
    })
  ]
}

// 要实现该插件，需要借助两个事件：
// 1. done：在成功构建并且输出了文件后，Webpack 即将退出时发生；
// 2. failed：在构建出现异常导致构建失败，Webpack 即将退出时发生；

class EndWebpackPlugin {
  constructor(doneCb, failCb){
    // 存在在构造函数中传入的回调函数
    this.doneCallback = doneCb;
    this.failCallback = failCb;
  }

  apply(compailer){
    compailer.plugin('done', (stats) => {
      // 在done事件中回调doneCallback
      this.doneCallback(stats);
    });

    compailer.plugin('failed', (err) => {
      this.failCallback(err);
    })
  }
}

module.exports = EndWebpackPlugin

// 调用过程
// 1. Webpack 启动后，在读取配置的过程中会先执行 new EndWebpackPlugin(options) 初始化一个 EndWebpackPlugin 获得其实例。
// 2. 在初始化 compiler 对象后，再调用 EndWebpackPlugin.apply(compiler) 给插件实例传入 compiler 对象。
// 3. 插件实例在获取到 compiler 对象后，就可以通过 compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件。 
// 4. 并且可以通过 compiler 对象去操作 Webpack。

// Compiler 和 Compilation
// 1. Compiler 对象包含了 Webpack 环境所有的的配置信息，包含 options，loaders，plugins 这些信息，
// 这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例；
// 2. Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。
// Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。

// Compiler 和 Compilation 的区别在于：
// Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。


// Webpack 的事件流机制应用了观察者模式，和 Node.js 中的 EventEmitter 非常相似。
// 可以直接在 Compiler 和 Compilation 对象上广播和监听事件，方法如下：
/**
* 广播出事件
* event-name 为事件名称，注意不要和现有的事件重名
* params 为附带的参数
*/
compiler.apply('event-name',params);

/**
* 监听名称为 event-name 的事件，当 event-name 事件发生时，函数就会被执行。
* 同时函数中的 params 参数为广播事件时附带的参数。
*/
compiler.plugin('event-name',function(params) {
  // todo
});


// 监听文件变化
// Webpack 会从配置的入口模块出发，依次找出所有的依赖模块，当入口模块或者其依赖的模块发生变化时， 就会触发一次新的 Compilation。
// 默认情况下 Webpack 只会监视入口和其依赖的模块是否发生变化，在有些情况下项目可能需要引入新的文件，例如引入一个 HTML 文件。
// 由于 JavaScript 文件不会去导入 HTML 文件，Webpack 就不会监听 HTML 文件的变化，编辑 HTML 文件时就不会重新触发新的 Compilation。
//  为了监听 HTML 文件的变化，我们需要把 HTML 文件加入到依赖列表中，为此可以使用如下代码：
compiler.plugin('after-compile', (compilation, callback) => {
  // 把 HTML 文件添加到文件依赖列表，好让 Webpack 去监听 HTML 模块文件，在 HTML 模版文件发生变化时重新启动一次编译
    compilation.fileDependencies.push(filePath);
    callback();
});


// 修改输出资源
// 有些场景下插件需要修改、增加、删除输出的资源，要做到这点需要监听 emit 事件，
// 因为发生 emit 事件时所有模块的转换和代码块对应的文件已经生成好，需要输出的资源即将输出，
// 因此 emit 事件是修改 Webpack 输出资源的最后时机。
// 所有需要输出的资源会存放在 compilation.assets 中，compilation.assets 是一个键值对，键为需要输出的文件名称，值为文件对应的内容。
compiler.plugin('emit', (compilation, callback) => {
  // 设置名称为 fileName 的输出资源
  compilation.assets[fileName] = {
    // 返回文件内容
    source: () => {
      // fileContent 既可以是代表文本文件的字符串，也可以是代表二进制文件的 Buffer
      return fileContent;
      },
    // 返回文件大小
      size: () => {
      return Buffer.byteLength(fileContent, 'utf8');
    }
  };
  callback();
});

// 读取 compilation.assets 的代码如下：
compiler.plugin('emit', (compilation, callback) => {
  // 读取名称为 fileName 的输出资源
  const asset = compilation.assets[fileName];
  // 获取输出资源的内容
  asset.source();
  // 获取输出资源的文件大小
  asset.size();
  callback();
});


// 还可以判断webpack安装哪些插件，无非也就是利用compiler对象
// 判断当前配置是否使用了 ExtractTextPlugin?
// compiler 参数即为 Webpack 在 apply(compiler) 中传入的参数
function hasExtractTextPlugin(compiler) {
  // 当前配置所有使用的插件列表
  const plugins = compiler.options.plugins;
  // 去 plugins 中寻找有没有 ExtractTextPlugin 的实例
  return plugins.find(plugin=>plugin.__proto__.constructor === ExtractTextPlugin) != null;
}

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

// 先安装postcss，autoprefixer，然后node运行这个文件
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var fs = require('fs');

var css = '* { transition: all .1s; }';

postcss([autoprefixer])
  .process(css)
  .then(function(result) {
      // 这一行是学习的时候需要的，看一下到底对象里面包含什么
      console.log(result);
      if (result.css) {
          fs.writeFileSync('index.css', result.css);
      }
      if (result.map) {
          fs.writeFileSync('index.css.map', result.map);
      }
  });

// .postcssrc.js
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    // browserslist: {},

    // cssnext下一代css语法，内部包含了autoprefixer，再次声明则会有警告
    "postcss-cssnext": {},
    // "autoprefixer": {}
  }
}