webpack
webpack是前端模块化打包工具,它能让我们进行模块化开发,并且会帮助我们处理模块间的依赖关系。不仅仅是js文件,css、图片、json文件在webpack中都会被当做模块来使用
和grunt/gulp对比
- grunt/gulp的核心是Task
- 我们可以配置一系列的task,并且定义task要处理的失误(例如es6、ts转化、图片压缩、scss转成css)
- 之后让grunt/gulp来依次执行这些task,而且让整个流程自动化
- 所以grunt/gulp也被称为前端自动化任务管理工具
- 什么时候用grunt/gulp
- 如果工程模块依赖非常简单,甚至是没有用到模块化的概念
- 只需要进行简单的合并、压缩、就使用grunt/gulp即可
- 但是如果项目使用了模块化管理,而且相互依赖非常强,我们就需要使用webpack了
- 不同
- grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心
- webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能
webpack安装
-
安装node.js,node自带了软件包管理工具npm
webpack的正常运行,需要依赖各种包,而node.js自带的npm工具(node packages manager)恰好能提供所需要的包 -
全局安装webpack
npm install webpack -g
-
局部安装webpack
–save-dev是开发时依赖,项目打包后就不需要继续使用
jsnpm install webpack --save-dev
- 全局安装和局部安装的区别
- 在终端执行webpack命令,使用的是全局安装的webpack
- 当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack
核心概念
entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图
output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名
loader
loader 让 webpack 能 够 去 处 理 那 些 非 js 文 件 (webpack 自 身 只 理 解
js)
plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
mode
- development
- prodution