为什么需要构建工具

1.转换ES6

2.转换JSX

3.CSS前缀补全/预处理器

4.代码的压缩混淆

5.图片压缩

为什么选择webpack

1.社区生态丰富

2.配置灵活/插件化扩展

3.官方更新迭代速度快

指定打包的入口，(webpack是模块打包器，webpack会将一切的资源如js,css,文件，图片等当作一个个的模块，而各个模块之间又存在依赖关系，因此根据入口文件生成依赖树，打包之后生成模块资源)

1.单入口文件

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

2.多入口文件

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

用来指定打包的输出（只有一个出口）

module.exports={
    output:{
        filename:'[name].js',
        path:__dirname + '/dist'
    }
}

webpack仅支持js和json文件类型，使用loaders去支持其他文件类型并把他们转化成有效的模块并把它加到依赖图中

常见的loaders

loader的使用

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

用于babel文件的优化，资源管理和环境变量注入，作用于整个构建过程（loader不能做的事由plugins完成）

常见的plugins

mode用来指定当前的构建环境：production,development,null mode的使用

mode:'production',

mode的内置函数功能

1.使用babel-loader

2.babel的配置文件babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins":[
    "@babel/proposal-class-properties"
    ]
}

3.webpack.config.js新增配置

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