项目构建打包——webpack

给JS提供的打包工具（打包成静态文件）和代码分割。可以打包成浏览器可以直接和运行的静态文件

打包过程.png

一、简单使用命令行操作Webpack：

cnpm install webpack --save-dev
#可新建js\html\css等文件来测试
./node_modules/.bin/webpack  xxx.js xxx.bundle.js

1、第一次编译使用 webpack 命令的时候，如果没有用全局安装，可能会出现 “ webpack: command not found ” ，可以用 “./node_modules/.bin/webpack xxx.js xxx.bundle.js ” 构建测试

2、webpack 天生不会处理 css 文件，需要引入loader来处理,css-loader 是使得webpack可以处理css后缀的文件，style-loader是把处理完的文件新建一个标签插入到html

cnpm install css-loader style-loader --save-dev

所以js文件内部引入css文件的时候，需要：

require('style-loader!css-loader!./xxxx.css')
...

#或者直接在命令行中配置处理(同上面不能同时配置)
./node_modules/.bin/webpack  xxx.js xxx.bundle.js --module-bind 'css=style-loader!css-loader'

3、这涉及到很多的webpack 参数配置需要自己去看，例如 --watch(可以监测改变自动打包)、 --progress(显示打包的进度条)、--（显示打包的有哪些模块）