给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(显示打包的进度条)、--(显示打包的有哪些模块)