持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
介绍
Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。在Webpack看来，前端的所有资源文件(js/json/css/img/less/scss/...)都会作为模块处理。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。比如在一个index.js中，使用了less、scss以及es6的模块法语法，但less要转css、scss要转css以及对es6的模块化语法进行转换，而这些所有的小转换都会在Webpack这个构建工具中统一的进行大转换，这个转换的过程称为打包，打包后会生成对应的静态资源(bundle)
进行大转换的过程：先把index.js中用到的所有资源文件提取为一个块(chunk)，然后对这个块进行打包，最后生成bundle
Webpack五个核心概念
Entry
入口(Entry)指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
Output
输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名
Loader
Loader让Webpack能够去处理那些非JavaScript文件(Webpack自身只能理解JavaScript)
Loader就是做转换(翻译)的，比如将less转为css
Plugins
插件(Plugins)可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等
Mode
模式(Mode)指示Webpack使用相应模式的配置
安装Webpack：
在安装webpack时，最好不要全局安装。最好是，每个项目都有自己对应的webpack
npm add webpack webpack-cli -g // webpack-cli 可以对webpack进行操作
npm add webpack webpack-cli -D // 将webpack添加到开发依赖中
在安装webpack时也可以指定要安装的版本是哪个版本：
npm add webpack@4.41.6 webpack-cli@3.3.11 -g // webpack-cli 可以对webpack进行操作
npm add webpack@4.41.6 webpack-cli@3.3.11 -D // 将webpack添加到开发依赖中
使用npm卸载全局安装的包：
npm uninstall -g 包名
注意
如果在安装webpack时出现错误为：
则说明和package.json中的名字冲突了，只需要将package.json中的名字改掉即可
运行
在运行时，选定一个index.js作为webpack入口起点文件，运行指令：
开发环境
webpack ./src/index.js -0 ./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 ，整体打包环境是生产环境
结论
- webpack能处理js/json资源，不能处理css/img等其它资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js代码(生产环境后的js文件更小)
