Webpack

1.什么是Webpack?

可以理解为模块打包机——找到JS模块及其他一些浏览器不能直接运行的拓展语言(Scss，TypeScript等)，将其打包或转换为合适的格式供浏览器使用。

2.WebPack和Grunt以及Gulp相比有什么特性

Grunt/Gulp是能够优化前端的开发流程工具
工作方式：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可替你完成任务。
Webpack是模块打包的解决方案
工作方式：把你的项目当作一个整体，通过给定一个主文件(如index.js)，Webpack将从这个文件开始查找所有的依赖文件，使用loader处理他们，最后打包成一个或多个浏览器可识别的JS文件。
Webpack处理速度更快更直接，可打包不同类型的文件

3.Webpack的安装

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

npm init 生成package.json文件（根目录）
使用
1.在命令行中输入路径

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

２.在项目中写好配置文件(webpack.config.js（根目录）)，在命令行中输入webpack即可。配置文件的参数有(entry入口文件，output打包后的文件（path存放的位置，filename打包后文件的名称）)
３.在package.json中对scripts对象进行相关设置
npm start 或 npm run test

4.Webpack的强大功能

在webpack的配置文件中配置source maps，需要配置devtool，打包生成source maps文件——提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。
1.devtool——参数影响打包速度和调试
2.利用Webpack构建本地服务其并实时监听代码的修改
npm install --save-dev webpack-dev-server
(1)webpack配置文件webpack.config.js

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新(默认端口port8080)
  } 
}

(2) 在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

参考文档：良心推荐
Webpack入门教程