菜鸟教程
中文官方文档
慕课网视频教程
webpack是将js文件进行打包的工具
webpack 根据模块的依赖关系进行静态分析,这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
配置文件:我们可以将一些编译选项放在配置文件中,以便于统一管理。
插件:在 webpack 的配置信息 plugins 选项中指定,用于完成一些 loader 不能完成的工。
webpack 自带一些插件,你可以通过 cnpm 安装一些插件。
‘cnpm install webpack –save-dev’
开发环境
当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。
‘webpack –progress –colors’
如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。
‘webpack –progress –colors –watch’
当然,我们可以使用 webpack-dev-server 开发服务,这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
安装 ‘cnpm install webpack-dev-server -g’
运行 ‘webpack-dev-server –progress –colors’
(利用webpack实现热响应??)
webpack核心概念
- entry
单个入口
对象入口(多个)
- output
filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。
将filename 输出到path的路径中
如果有多个入口起点则应该使用占位符来确保每个文件具有唯一的名称。
- loader
使用 Loader:在你的应用程序中,有三种使用 loader 的方式:配置(推荐):在 webpack.config.js 文件中指定 loader。 内联:在每个 import 语句中显式指定 loader。 CLI:在 shell 命令中指定它们。
- plugins
插件目的在于解决 loader 无法实现的其他事。