webpack的简介

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