什么是网页包？
代码分割
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--进度--颜色
发表评论