【Webpack】基础篇

（这段时间学习Webpack系列，做下笔记）

一、安装Webpack

全局安装：npm install webpack -g
局部安装：npm install webpack --save-dev

二、文件夹目录（初始化）

• dist文件夹：存放之后的打包文件
• src文件夹：存放自己写的源文件
• index.html：浏览器打开展示的首页html
• package.json：通过 npm init 生成，npm包管理的文件
• webpack.config.js：webpack配置文件，可以快速使用打包命令

三、打包命令

cd到目标文件

1、直接webpack命令

2、webpack.config.js配置后，打包命令直接简写webpack

• entry：入口（默认是 ./src）
• output：输出（默认是dist/main.js）

3、package.json配置脚本映射，输入npm run build就相当于运行webpack

（在控制台直接输入webpack是调用的全局webpack。映射后优先调用本地webpack。能避免全局webpack版本和拉下来的代码应该用的webpack版本不一致的情况）

安装本地webpack，成功后package.json多了devDependencies（开发时依赖）属性

• devDependencies：开发时依赖 --save-dev；
• dependencies：运行时依赖 --save。
• ~3.6.0：匹配所有3.6.x版本，但将错过3.6.0；
• ^3.6.0：匹配任何3.xx版本，包括3.6.0。

四、loader

webpack默认只会处理js代码，当我们想要打包其他内容时，让webpack处理其他类型的内容，就要使用相应的loader

官网：https://www.webpackjs.com/loaders

步骤：

1. 通过npm安装需要使用的loader（安装时注意其版本是否匹配）；
2. 在webpack.config.js中的modules关键字下进行配置。

css

注意：使用多个loader时，从右向左加载（必须先加载css-loader）

图片

url-loader、file-loader

ES6转换为ES5

babel-loader（ES6大多数浏览器不支持）

更多loader，参考官网：https://www.webpackjs.com/loaders

五、plugin

官网：https://www.webpackjs.com/plugins/

步骤：

1. 通过npm安装需要使用的plugin（安装时注意其版本是否匹配）；
2. 通过require('插件名')引入插件；
3. 在webpack.config.js中的plugins关键字下进行配置。

版权声明：BannerPlugin

重新打包，查看打包文件，版权说明已添上

打包html：HtmlWebpackPlugin

作用：

1. 自动生成index.html文件（可以指定模板生成）；
2. 将打包的js文件，自动通过script标签插入到body中。

压缩js：UglifyjsWebpackPlugin

搭建本地服务器：webpackDevServer

这个在webpack.config.js中的devServer关键字下进行配置

可以在package.json中scripts配置添加 --open参数（表示直接打开浏览器）

配置文件的分离：WebpackMerge

需求：

1. 开发阶段不需要压缩js等插件
2. 运行阶段不需要devServer等配置

将webpack.config.js拆分成三个文件

base.config.js（基础配置）：删除plugins、devServer等配置

dev.config.js（开发时配置）：引入base.config.js文件和WebpackMerge插件并使用

prod.config.js（运行时配置）：引入base.config.js文件和WebpackMerge插件并使用

因webpack.config.js修改了路径和名字，所以还需在package.json配置新config（--config）

更多plugin，参考官网：https://www.webpackjs.com/plugins/

六、Vue配置

因为vue组件开发时运行也是需要的，所以不加--save-dev

npm install vue

安装后建立相关vue实例代码并运行，发现控制台报错：

是因为vue分为两个版本，如下：

// template -> ast(语法结构树) -> render -> Vdom ->真实DOM 
runtime-only：该版本，代码中不可有任何的template（开发推荐）

// render -> Vdom ->真实DOM 
runtime-compiler：该版本，可以有template，因为有compiler可以用于编译template

所以需要在webpack.config.js进行配置，改成runtime-compiler版本（vue官网有）

TIPs

为什么Webpack全局安装后，还需要局部安装？

在终端执行webpack命令，使用的是全局安装的webpack。

当在package.json中定义了scripts映射时，其中包含的webpack命令使用的是局部webpack。

局部安装保持了webpack版本与该项目版本的一致。

Webpack和grunt、gulp的对比

grunt、gulp更加强调前端流程的自动化，模块化不是它的核心。

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他的附带功能。