webpack4 基础

JS模块化

　　AMD（了解）

　　　　异步的模块定义，使用define定义模块，使用require加载模块，RequireJS，依赖前置，提前加载

　　CMD(了解)

　　　　通用模块定义，一个文件一个模块，使用define来定义模块，使用require加载模块  SeaJS，尽可能懒执行

　　ESM（推荐）

　　　　一个文件一个模块， export/import 

　　CommonJS　　

　　　　一个文件一个模块，通过module.export 暴露模块接口，通过require引入模块同步执行

CSS模块化

　　CSS设计模式

　　CSSModules

安装环境

　　全局安装webpack

webpack中文

　　https://webpack.docschina.org/guides/getting-started

 历史版本

　　V1  编译   打包    HMR（模块热更新）  代码分割     文件处理

　　V2 Tree Shaking     ES module     动态Import 

　　V3 Scope Hoisting     Magic Comments

entry　

　　这是一个入口文件

  entry: {
    app: './app.js'
  },

output

　　这是出口文件 默认./dist/main.js

  output: {
    filename:'[name].[hash].js'
  },

loader

　　webpack本身只支持js，而且loader能够让webpack处理非js文件

　　　　test 用于识别被loader转换的文件

　　　　use 进行转换时使用哪个loader

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

插件plugins

　　主要用于打包优化 资源管理 注入环境变量

plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

模式

　　在webpack4中需要制定模式 

　　　　参数有3个 development production  none

mode: 'production'

浏览器兼容性

　　支持所有es5  IE8以下浏览器不支持

　　如果需要支持旧浏览器需要加载一个polyfill