打包模块演化过程

commonJS

• 模块化
• 命名空间
• 同步加载依赖的其他模块，通过module.exports导出

AMD

• 异步加载
• 解决浏览器环境的模块化
• 运行在浏览器和node.js

es6模块

• 需要转成es5
• import export

构建

自动化构建

源代码发布到线上的可执行Javascript CSS HTML

• 转换代码
• 文件优化
• 代码分割
• 模块合并
• 自动刷新
• 代码校验
• 自动发布

webpack

• 一切皆是模块 loader转换 plugin注入

使用loader以及plugin

• babel-loader

  在一些特殊的loader配置中，可以使用json/js文件的形式写presets

  //如babel-loader presets可以直接写在webpack.config.js中，也可以单独写个文件.babelrc，此文件是json形式
  module: {
  rules: [
    {
      test: /\.js|jsx/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-transform-runtime'],
        },
      },
    },
  ],
  },
  // 其中options可以写在.babelrc文件中，当配置较多时推荐直接以单独文件形式写入
  
  {
  "presets":["@babel/preset-env","@babel/preset-react"]
  }
  

配置

根据需求寻找已有的loader/plugin

webpack原理

依据node模块原理组装文件