什么是网页包?
代码分割
Webpack 有两种组织模块依赖关系的方式:同步和异步。 异步依赖作为分割点,产生一个新的块。 优化依赖树后liunx 安装webpack,每个异步块都被打包为一个文件。
装载机
Webpack 本身只能处理原生 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换为 JavaScript 模块。 这样,任何资源都可以成为 Webpack 可以处理的模块。
智能分析
Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们是 CommonJS、AMD 还是纯 JS 文件形式的模块。 即使在加载依赖项时,也允许使用动态表达式 require("./templates/"+name+".jade") 。
插件系统
Webpack 还有一个功能丰富的插件系统。 大部分内容功能都是基于这个插件系统运行的,也可以开发使用开源的Webpack插件来满足各种需求。
奔驰
Webpack 使用异步 I/O 和多级缓存来提高运行效率,这使得 Webpack 能够以令人难以置信的速度进行增量编译。
总结一下它的主要优点:
1、按需加载模块,按需进行懒加载,各个模块在实际使用时增量更新。
2、Webpack使用commonJS编写脚本liunx 安装webpack,同时也对AMD/CMD有全面的支持,方便老项目的代码迁移。
3.不仅仅是JS可以模块化,它可以处理各种类型的资源。
4. 易于开发,可以替代一些grunt/gulp任务,例如打包、压缩混淆、图像转换为base64等。
5.扩展性强,建立插件机制
安装
首先,您需要安装 Node.js。 Node.js 附带了包管理器 npm。
使用 npm 安装 webpack
#npminstallwebpack-g////全局安装
至此,Webpack已经安装在全局环境中。 可以通过命令行 webpack -h 查看相关说明。
一般我们都会安装webpack作为项目依赖,这样我们就可以使用本地版本的webpack
常用命令
npminit 命令会引导你创建一个package.json,其中包含版本作者等信息,这将帮助你进行分包。 已安装包的依赖关系也会显示在package.json中。
npminstall 直接执行该命令,会根据当前目录下package.json的配置安装各个依赖包。
npminstall[module] 将此模块安装在当前目录中。 它将检查该模块是否存在于node_module文件夹中。 如果存在,则不会安装。
npminstall[module]-g 全局安装模块。 以全局模式安装的包将手动注册到系统变量路径中。
npminstall[module]--save-dev 将此模块安装在当前目录中,仅在开发过程中使用。 在包的“devDependencies”下,这意味着它仅在开发过程中使用。
//进入项目目录
//确保已经有package.json,如果没有,用npminit创建
#npminstallwebpack--save-dev,安装到你的项目目录
#npmrunwebpack (运行项目时,将webpack命令写入package.json的scripts标签中,原理是使用webpack命令进行打包。)
如果要使用webpack开发工具,需要单独安装webpack-dev-server服务器。 如果没有开发工具,则无需执行以下命令。
#npminstallwebpack-dev-server--save-dev
可以使用
#webpack-开发服务器
启动
webpack 构建命令
webpack常用参数
$webpack--configwebpack.min.js//另一个配置文件
$webpack--display-error-details//显示异常信息
$webpack--watch//监听更改并手动打包
$webpack-p//压缩混淆脚本,这个很重要!
$webpack-d//生成map映射文件,告诉哪个模块最终打包到那里
随着项目的进展,编译过程可能会变得越来越长,因此我们可以显示一些进度条并降低配色方案以实现更友好的输出。 我们可以通过以下命令来实现:
$webpack--进度--颜色
启动服务器
$webpack-dev-server--进度--颜色
发表评论