webpack

模块化

打包

静态模块打包工具

介绍

# npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies# 安装最新稳定版npm i -D webpack# 安装指定版本npm i -D webpack@<version># 安装最新体验版本npm i -D webpack@beta

外框

安装到目录

npm i -g webpack

安装到全局

npm i -g webpack-cli

显示webpack-cli 和 显示webpack版本就ok了

webpack -v

额外安装

从 Webpack2 开始，已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。

安装

Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。

安装：npm i -D style-loader css-loader

如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。 在配置 Loader 时需要注意的是：use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

处理css

Loader

Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。

http://webpack.wuhaolin.cn/1%E5%85%A5%E9%97%A8/1-5%E4%BD%BF%E7%94%A8Plugin.html

Plugin

安装：npm i -D webpack-dev-server

DevServer

使用

webpack