webpack包教不包会系列（1）

注：在github上看到一篇比较好的webpack入门教程，本人也是为了加深印象以此记录。奉上原文地址：https://github.com/kingvid-ch...。

webpack产生背景

1. 多js文件下全局对象的冲突；
2. 模块的加载顺序问题；
3. 解决模块或者库的依赖问题；
4. 模块过多难以管理；

webpack的作用

1. 将所有依赖拆分成块且按需加载；
2. 首屏加载耗时较少；
3. 所有的静态文件都是一个模块；
4. 第三方库也可以作为一个模块进行加载；
5. 自定义程度较高，可以按需自定义打包流程；
6. 适用于大的project的开发场景；

config

webpack可以通过CLI指定配置文件，在不指定配置文件的情况下，webpack会自动在当前目录寻找文件名位webpack.config.js的配置文件.

webpack --config mywebpack.config.js

loader

在webpack中所有的文件都是模块，而且都可以被引用。要加载这些文件我们就需要对应的loader。

常用命令

在package.json文件中写入webpack和webpack-dev-server常用命令，后期还要分生产环境和开发环境进行打包，这样通过npm命令能省下不少输入麻烦。

"script" : {
    "start" : "webpack-dev-server",
    "build" : "webpack"
}

如果没有全局安装webpack或者webpack-dev-server需要把引用的本地路径写明：

"script" : {
    "start" : "node_modules/.bin/webpack-dev-server",
    "build" : "node_modules/.bin/webpack"
}