webpack的五大核心概念及下载

entry:

　　入口编译的配置，webpack从哪个文件开始编译

output:

　　编译后的资源，输入到哪，以及如何命名；

loader:

　　处理非js文件的编译，webpack自身只理解js

plugins:

　　也是处理编译，从优化到打包压缩；

mode:

　　区分开发环境和生产环境的编译；development和production；

通过process.env.NODE_ENV区分

 

初始化配置和体验：

// 初始化package.json
npm init

// 下载安装webapck
npm install -g webapck webpack-cli
npm install webpack webpack-cli -D

 

index.js: webpack入口起点文件

  1. 运行指令：

    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development

      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

      整体打包环境，是开发环境

    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production

      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

      整体打包环境，是生产环境

   2. 结论：

    1. webpack能处理js/json资源，不能处理css/img等其他资源

    2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~

    3. 生产环境比开发环境多一个压缩js代码。