第一部分:概念
webpack是Javascript应用程序的模块打包器。他处理程序时,会递归的构建一个依赖关系图,包含应用程序需要的每个模块,然后打包成少量的bundle-通常只有一个,有浏览器加载。
四个核心概念:
入口(entry): 确定需要打包的内容,webpack的入口起点
输出(output):打包后的内容存放的位置
.filename 用于输出文件的文件名;
.path目标输出目录的绝对路径;
loader:两个目标1、识别出被对应的loader转换的那些文件。(test属性)
2、转换这些文件,添加到依赖图中,并最终添加到bundle中
插件(plugins):在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。
想要使用一个插件就需要先用(require),然后添加到plugins数组中,多数插件可以通过选项(option)自定义
第二部分:安装
是全局安装还是本地项目安装好呢?
答:两种安装方式,到底该用哪一种,推荐本地安装。全局安装有一个版本管理问题, 如果我们的项目中,有的用webpack 1.0,有的用webpack2.0 ,而全局webpack 却只有一个命令,那就不好办了。本地安装却没有这个问题。If you are using npm scripts in your project, npm will try to look for webpack installation in your local modules for which this installation technique is useful. 当我们使用npm scripts 时,npm 会寻找本地安装的webpack ,这就解决版本问题, 每一个项目下都使用本地安装webpack , 互不影响。
全局安装的方法:
npm install webpack -g
卸载全局安装的webpack的方法:
npm uninstall webpack -g (注意管理员权限 sudo去卸载)
安装了全局后,需要先卸载,然后在本地安装。
在本地安装之前先初始化下 npm init 然后本地安装 npm install webpack --save-dev 安装完后在命令行输入webpack 显示
但是在你的项目的根目录下有一个node_modules的文件生成。
下面来构建项目目录:
配置文件:
有了这个配置之后,再打包文件,只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了,这条命令会自动引用webpack.config.js文件中的配置选项,
没有全局安装的情况下,需要输入很长的命令来执行任务很繁琐,我们可以利用npm scripts的任务引导功能来配置快捷的打包任务
直接使用npm start 就可以了打包了
如果你想对应的脚本名称不是start , 需要这样用npm run {script name},如npm run webpack,