WebPack是什么?

webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。

webpack 有哪些重要特征?

1.插件化:webpack本身非常灵活,提供了丰富的插件接口。基于这些接口,webpack开发了很多插件作为内置功能。
2.速度快:webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的,尤其是增量更新。
3.丰富的Loaders:loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
4.高适配性:webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码,自动帮你管理他们的依赖关系。此外,webpack对第三方库的兼容性很好。
5.代码拆分:webpack可以将你的代码分片,从而实现按需打包。这种机制可以保证页面只加载需要的JS代码,减少首次请求的时间。
6.优化:webpack提供了很多优化机制来减少打包输出的文件大小,不仅如此,它还提供了hash机制,来解决浏览器缓存问题。
7.开发模式友好:webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。
8.使用场景多:webpack不仅适用于web应用场景,也适用于Webworkers、Node.js场景。

常用功能

1.设置多个入口文件

2.生成source maps以便于调试

3.Externals

4.用webpak构建本地服务

5.webpack在打包完成后自动打开浏览器

6.webpack的loaders

       6.1 让webpack能够ES6和JSX语法

       6.2 用webpack处理LESS/CSS

7.将CSS样式打成单独的文件

8.将公共的JS代码抽离出来,以便共用

9.页面自动引入打包后的文件

10.对JS文件进行压缩

11.配置环境变量,以区别使用不同的配置

12.进行代码分割,让代码按需加载

webpack-config.js

图片1

安装webpak

如果安装npm出现问题,可以通过淘宝服务器安装 cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

1.安装 nodeJs &  npm

2.初始化 npm init & 创建package.json

3.安装 webpack ,npm install webpack –save-dev (安装本地)

4.运行 webpack ,node_modules/.bin/webpack 

本文作者:admin 转载请注明来自:携程设计委员会