webpack笔记

作用

模块打包机：分析项目结构，找到js模块以及其他一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），将其转换和打包为合适的样式供浏览器使用。

与Grunt、Gulp相比

Grunt、Gulp是优化前端开发流程的工具。工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤，工具可以帮你自动完成。
Webpack的工作方式是：把项目当做一个整体，通过一个给定的主文件（如index.js），Webpack将从这个文件开始找到你项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可以识别的js文件。

热更新

配置文件提供一个入口一个出口。wepack --watch命令可以动态监听文件改变并打包，输出新的bundle.js文件，但这样文件多了以后打包会变慢，且不能热更新，需要手动刷新浏览器。

webpack-dev-server就能克服上面两个问题，它启动了一个使用express的http服务器，它跟client使用websocket通讯，原始文件改动后，webpack-dev-server会实时的编译，但不会输出到输出文件夹，而是保存在内存中。

npm 指令配置

npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代略微繁琐的命令（node_modules/webpack）
如：

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack"
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

注：package.json中的script会安装一定顺序寻找命令对应位置，本地的node_modules/.bin路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

Source Maps配置（使调试更容易）

配置位置如下：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

Source Maps可以找到出错位置，根据配置的不同，打包速度和调试效果也不同
eval-source-map：推荐开发阶段使用，打包速度较快，有完整的Source Maps，但生成的js有安全和性能隐患，生产阶段打包一定要关闭！
cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。