1. 什么是webpack？
webpack是一个现代Javascript应用程序的模块打包器，当webpack处理应用程序时，他会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
上边是webpack给出的官方定义；我们可以很直观的看出webpack作为一个打包工具，最大的优点即是主动，能够根据入口文件分析你当前的目录结构，并且根据运行按需加载依赖，也就是其解决前端开发中最关键的问题——按需加载；下面详细说一下对webpack学习和查找资料后的理解认识和总结。
2.为什么要有webpack？相比gulp 和 grunt 有什么不同点以及优势？
相对于前端打包工具，从grunt、gulp 到 webpack，期间有很多变动，但为什么webpack最终成了主流？这不得不从其核心说起；那就是 按需加载，众所周知，我们使用打包工具的目的就是为了实现开发模块化，并且实现按需加载，以及支持后续所出现的coffeescript 、typeScript 和 ES6 等等，以上种种类目繁杂，如果使用gulp 或 grunt，那会是什么样子呢？看下下面两张图：
这是gulp的工作原理
[图片上传失败...(image-c0592b-1512395774697)]
这是webpack的工作原理
[图片上传失败...(image-d947ff-1512395774697)]
从上面可以看出，gulp只是一个可以根据要求操作文件的工具，无论是压缩、转译输出等等，并没有灵活的实现真正的按需加载和模块化，它也不是基于你的代码进行进行文件操作，而是基于task任务配置进行工作；虽然 webpack 也做的是同样的事情，但是webpack可以针对代码中的require 和 import 的不同类型的文件使用不同的 loader 做处理，由于 webpack 有依赖树和 loader 技术，除了js，所有的assets资源都是采用了动态绑定的处理方式，也就是对应的loader，这样每个模块model都声明了自己的依赖，因此，webpack就可以仅仅打包那些用到的模块。
3.webpack基础配置项参数
这里是提醒自己一点：
webpack是开发阶段的一个依赖项，不是运行时候的依赖项，开发完成之后，你的前端库是被别人依赖的，而别人用的时候是不需要webpack存在的，所以对于局部项目的安装应该这样：
npm install webpack --save-dev
webpack的配置也是提供一个配置文件的，那就是 webpack.config.js，对于项目的操作需要webpack的支持的配置参数都可以写入，启动webpack后，webpack会读取配置文件中相应的参数，并执行后续相应的操作。
最基础版 webpack.config.js
module.exports = {
entry: __dirname + '/src/index.js',
output: {
path: __dirname + '/public/js',
filname: 'app.js'
},
devtool: 'source-map' // 后续说明
}
4.webpack核心概念
关于webpack的核心，其实也就是如何解决依赖打包、模块化的问题，相对于gulp和grunt的手动添加依赖，webpack实现了自动分析，它可以直接自动分析入口文件中的依赖，判断当前文件中是否需要加载某个依赖文件，然后将当前需要加载的依赖打包，无需对无关依赖进行手动更改，从而保证依赖打包的模块化加载。
- entry配置
entry作为依赖关系的入口位置，有着关键作用；在webpack中，这个 entry 可不止一个，它的类型可以是对象、字符串、数组；
entry: ['entry', './entry_']
如果它是一个路径字符串，则它最终会与context 配置一起 resolve 一个绝对的 url；
/*
* 这是之前一个vue项目中刚使用webpack的时候
* 使用的一个模板配置，可以说是很无脑了
* 根据绝对路径，在当前项目默认的src下访问main.js
* 然后根据main中的import 和 require 进行相应加载和导入
*/
entry: {
app: './src/main.js'
}
如果字符串是相对路径，则会根据context配置的路径查找一个相对路径。（所以这里一般使用path来解决路径问题）。
entry: {
app: path.resolve(__dirname, './src/index.js'),
page: ['./entry','./entry_'] // 这里webpack会按序打包，但是只导出最后一个文件
}
对于编译后的输出，除了基本的output路径配置，还要配置输出的文件名。
output: {
path: path.resolve(__dirname,'dist'), //这里的dist相信都比较眼熟了
filename: '[name]-[chunkhash].js'
/*
* 这里使用的 name 是使用的占位符，输出文件名即 entry 入口进入的文件名
* chunkhash 是为了输出后的文件名的hash值相同
**/
}
对于多页面复杂应用的入口配置，可以使用 commonChunkPlugin 插件进行，保证入口对公共模块的抽离。
- module 配置
module 是webpack中进行模块加载时所需要的配置；在进行模块加载的时候需要使用不同的loader对不同的模块进行处理，这里的核心就是根据所需加载模块的不同，要配置相关的loader；比如：
// 这是之前一个项目模板的配置之一
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig,
include: [
path.resolve(...)
] // 每一个 resolve 表示一个需要被loader处理的路径
},
...
]
}
test 属性: 也就是应该被 loader 识别，然后进行转换操作的文件 。
loader 属性：对对应 test 进行处理操作的模块。
use 属性：转换相应的文件，使其支持浏览器，并且能够被添加到依赖树中。
- resolve 配置
先贴一个项目模板的配置（现在看都不知道当时怎么写的，逃）
resolve: {
extensions: ['.js','.vue','.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
}
alias 属性：有些文件名很长，或者路径比较长，如果单纯的每个依赖都去完全写入，会增加多余的代码量；这里配置alias后，可以通过别名去代替对应的路径。
这里举个例子： 如果说代码中有 require('@/index')，webpack会首先发现这个别名，然后根据你的 alias 中的配置，搜索相应的别名对应的路径，然后根据 extensions 中的设定的依赖的扩展名，依次在对应目录进行查找，比如找到了 index.vue，那么就根据配置文件中 module 的设置，调用vue-loader 来处理这个 index.vue 模块，这是一个局部的基本流程。
网友评论