(1)创建目录文件,进行npm init
(2)进行webpack的全局安装
cnpm i webpack -g
(3)进行webpack的局部安装
cnpm i webpack@1.15.0 --save-dev //带版本号的安装
(4)进行项目依赖安装
cnpm install
(5)创建webpack.config.js文件并初始配置
(6)命令行使用webpack命令运行得到打包结果
(7)webpack的那些插件们
clean-webpack-plugin用于在building之前删除你以前build过的文件
html-webpack-plugin 用于解决修改入口与出口文件后html引用script文件变化的问题。
webpack-merge
uglifyjs-webpack-plugin
内置的webpack.optimize.CommonsChunkPlugin
copy-webpack-plugin
(8)单文件入口简单打包
(9)服务与热更新
- 在命令行安装 cnpm i webpack-dev-server --save
- 进行devServer的配置
- 配置启动命令,增加--open来自动启动网站
(10)面试题
(11)对css进行处理
对应loader的下载
(12)配置JS的压缩
(13)webpack的功能
css的处理
图片的处理
自动生成index.html文件并自动添加所有script
为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于
src/app.js
,source map 就会明确的告诉你
缓存,webpack 编译生成的文件能够被客户端缓存,而在文件内容变化后,能够请求到新的文件
文件路径别名alias