Webpack 学习笔记2-webpack 的使用

webpack 的使用

初始化配置

1. 初始化 package.json
   输入指令:
   npm init
   然后输入包名（随意）
   接着一路回车即可
2. 下载并安装 webpack
   输入指令:
   npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

编译打包应用

1. 创建文件
2. 运行指令
   开发环境指令：
   webpack src/js/index.js -o build/js/built.js --mode=development
   功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成
   浏览器能识别的语法。
   生产环境指令：
   webpack src/js/index.js -o build/js/built.js --mode=production
   功能：在开发配置功能上多一个功能，压缩代码。
3. 结论
   webpack 能够编译打包 js 和 json 文件。
   能将 es6 的模块化语法转换成浏览器能识别的语法。
   能压缩代码。
4. 问题
   不能编译打包 css、img 等文件。
   不能将 js 的 es6 基本语法转化为 es5 以下语法。

/*
index.js:webpack入口起点文件

运行指令：
1.开发环境指令：webpack ./src/index.js -o ./build/built.js --mode=development
  指令意思是：webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 
  整体打包环境是开发环境
2.生成环境指令：webpack ./src/index.js -o ./build/built.js --mode=production
  指令意思是：webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 
  整体打包环境是生产环境

结论：
1.webpack能处理 js / json 文件,不能处理 css / img文件
2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3.生产环境比开发环境多一个压缩js代码,体积比较小
*/

每修改一次文件就要重新打包一次