12 webpack基础 (了解)

什么是webpack

解释:

如果你用的是webpack打包项目, 那么你可以直接在js文件或者其它文件使用模块化开发, 打包时webpack会自动帮你解析成大部分浏览器可以兼容的代码, 并且会根据相互引依赖自动进行整理

和grunt/gulp的区别

理解webpack

解释:

webpack正常运行–(依赖)–>node环境(node环境为了正常运行各种代码)–(依赖)–>npm中的各种包(所以要npm init初始化项目)

安装webpack (终端输入) :

npm install webpack -g

补充知识点1

目录结构

注意:

基本上所有的项目都是这样, 当然这只是最简单一点认识, 更好的目录结构划分, 见我的项目: https://github.com/pbw-langwang/VueDirectorySpecification-mall

webpack简单的命令(打包js)

工作流程

配置入口和出口

工作流程

配置npm run(使用局部webpack)

注意:

只要是在终端中敲的命令，基本上就是全局的，除非你配置了 或者 进入到你局部安装的文件夹, eg: ./node_modules/webpack XXX

局部安装webpack

补充知识点

运行时依赖和开发时依赖

注意:

1. 安装包时, 一定要注意该库是否在打包后还要依赖 ! 怎么判断是-S还是-D，去看：https://www.npmjs.com/package/webpack(什么包就换成什么名字)
2. 开发时依赖用–save-dev; 运行时依赖直接install 或者 --save