基本概念：webpack是一个前端资源管理和打包工具。将松散的模块按照依赖和规则打包成生产环境的前端资源。可以按需求加载进行分隔。等到在异步加载。CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
为什么还要开发webpack？
目前的打包工具没有一些功能，比如代码分隔，分块传输懒加载。整合第三方类库。每 个部分都可以自定义。loader，插件系统模块热更新。
- 将依赖树拆分成按需加载的块
- 初始化加载的耗时尽量少
- 各种静态资源都可以视作模块
- 将第三方库整合成模块的能力
- 可以自定义打包逻辑的能力
- 适合大项目，无论是单页还是多页的 Web 应用
webpack特点：
1.代码分隔：webpack有两种组织模块依赖的方式，同步和异步。异步依赖作为分隔点，形成一个新模块。每一个异步成为一个新模块。
2.loader：webpack本是只能处理原声javascript模块，但loader可以将各种资源转换成javascript模块，这样任何资源都可以用webpack处理。
3.智能解析：可以使用智能表达式
4.插件：丰富的插件
5.快速运行： 异步I/O和多级缓存，可以使webpack能以难以置信的速度快速增量编译
为什么要使用代码分隔？
模块加载和传输，首先由两种方法，一种是每个模块单独添加，另一种都打包为一个块，单独添加http请求过多，只打包一个模块，会导致启动速度过慢，流量浪费，初始化慢。都过于简单粗暴。
分块传输，按需进行懒加载，实际用到在进行更新，是较为好的方案。这需要对整个代码库进行模块静态分析、编译打包。
webpack安装：
全局安装
npm install webpack -g
项目安装
npm install webpack --save-dev
两个坑？1.必须先进行全局安装 2.文件夹名不能为webpack。
webpack简单命令使用
webpack hello.js hello.bundle.js
webpack 要打包文件 打包后文件名
loader特性
- Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader
- ，但是最后一个 loader 必须返回 JavaScript。
- Loader 可以同步或异步执行。
- Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
- Loader 可以接受参数，以此来传递配置项给 loader。
- Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
- Loader 可以通过 npm 发布和安装。
使用Loader 可以在 require() 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。
0.安装
npm install css-loader style-loader
1.直接在引用处理实例
require('style-loader!css-loader!./style.css ')
2.在命令行下使用
webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
Loader 可以访问配置。
插件可以让 loader 拥有更多特性。
Loader 可以分发出附加的任意文件。
3.配置文件下使用
跳转下章一起看哈
配置文件
默认情况下:会搜索当前目录的 webpack.config.js 文件
也可以--config命令参数指定具体的命令
npm install css-loader style-loader --save-dev --save-dev 后缀可以理解为，脚本需要的文件，不需要打包到前端
const path = require('path');
module.exports = {
entry: './entry.js',
output: {
path: path.resolve(__dirname, "dist/js"),
filename: 'bundle.js'
},
module: {
loaders: [
{test: /.css$/, loader: 'style-loader!css-loader'}
]
}
}
entry可以为字符串，字符串数据，对象
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
但是还是只会输出一个文件
如何输出多个文件？
output当是单输入，只会输出一个文件，当时多输入时，如果也只写静态文件也只会返回一个静态文件。
解决方法：使用站位符号保证文件不会被覆盖
常用的占位符
Template Description
[hash] ：：唯一得模块代号打包时候显示的
[chunkhash] ：：md5算法只有修改后的文件hash值会不一致，git可以只上线被修改的文件
[name] ：:也就是entry里面的key
[id] ：：The module identifier
[file] ：：The module filename
[filebase] ：：The module basename
[query] ：：The module query, i.e., the string following ? in the filename
使用占位符方法
filename: '[name]-[chunkhash].js]'
配置npm脚本
命令行指定处理方法
命令行下webpack常用参数
--watch：显示过程
--progress： 看到读条
--display-modules 列出引用模块
--display-reasons 为什么打包这个模块
--config 重新指定配置文件