webpack解密

一、什么是webpack

---

1. 初识webpack

官网：https://webpack.github.io/
中文网：https://www.webpackjs.com/

Webpack是模块化管理及打包工具/模块打包机（ module bundler）。可以把我们写的项目进行打包。一般开始vue项目，都是通过脚手架创建的，创建如下：

运行项目：npm run serve，然后进行开发，这种环境叫开发环境。当项目开发完毕，上线的时候，需要项目进行打包。通过npm run build。因为项目中资源非常多，资源之间的关系也非常复杂。这个时候就需要使用webpack来解决这个问题。

另外webpack可以把一些高级的语法打包成低级语法，这样浏览器就可以识别。如今的Web可以看做是功能丰富的应用，拥有复杂的js代码和众多有依赖包，为简化开发复杂度，提高开发效率，涌现了大量的实践：

• es6 模块化
• 全新的js写法，如ES6、TypeScript、CoffeeScript
• Less、Sass等css预处理器

这些实践大大的提高了开发效率，但是浏览器不能解析这些代码，需要进行额外的处理才能让浏览器识别，而手动处理又非常繁琐，于是就需要一些专业的工具。

• Browserify – 实现浏览器端的commonjs模块化，功能比较单一
• Gulp — 优化项目的一个工具
• Grunt
• Webpack — 最好的模块打包机
• Bower — 类似于npm，管理各种包/模块的
• Yeoman – 构建项目结构的
• Fis（百度）-- 和webpack类似

2. 快速安装

在安装node.js的前提下安装webpack

对了，还要检查package.json是否存在，为了方便使用(后面会提)

npm init -y  // 生成package.json，有的哈就不用了
npm install --save-dev webpack
npm install --save-dev webpack@<version>   // 指定版本
// 使用4.0+版本还需要的安装 webpack-cli 
// 此工具用于在命令行中运行 webpack     
npm install --save-dev webpack-cli    

npm install --global webpack // 全局可用

二、webpack使用

---

1. 快速使用

检查一下package.json文件的配置，没有的话就去安装吧(ノ◕ω◕)ノ

npm run build // 输入打包vue命令，运行

如图dist 目录 就是我们打包vue项目得到的，是不是很简单！

2. 配置文件

为什么要配置文件？

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件 webpack.config.js

考虑到CLI中运行本地的webpack不是很方便，可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：

 {
   
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js"