核心概念

• 模块化打包机，分析项目结构，找到模块依赖，把浏览器不支持的特性转换和打包成为浏览器支持的格式
• 与gulp的区别
  • gulp：基于任务的打包工具，所有任务需要人为配置
    • 工作原理：用户编写需要编译、合并、压缩的任务步骤，然后进行任务的执行
  • webpack：基于配置的构建工具，要实现任何构建，只需要一个配置文件webpack.config.js
    • 工作原理：把项目当成一个整体，通过入口文件分析整个项目结构，找到所有依赖模块，并利用配置文件处理这些模块，最后打包为一个浏览器可识别的文件
• 操作步骤
  • 安装 ：npm i -D webpack (安装cli以便在命令行中使用npm i -D webpack-cli)
  • 配置

    • mode 模式

      • development
      • production

    • entry 入口文件

      • 单入口 entry：'./src/main.js'
      • 多入口 [path1,path2]或{ index:'./src/index.js',main:'./src/main.js'}

    • output 出口文件

      • output :{path:'./dist'}

    • loader 加载器

      • module.rules

        

    • devServer 测试服务器

      • static 静态资源
      • port 端口
      • proxy 代理
        • "/api" : {target:'',changeOrigin:true,pathRewrite:{'^/api':''}

    • plugins 插件

      • [new HTMLWebpackPlugins({template:'文件相对路径'})]

    • resolve 默认行为

      • extensions 默认扩展名，不能写太多，会导致加载缓慢
      • alias：路径别名
        • '@':path.resolve('src')