下面就来通过例子讲解webpack的安装,基本操作
webpack 是一个用于编译Javascript模块的工具,在安装webpack之后,可以通过
- CLI (command line interface 就是在控制台上使用 )
- API (在js中导入模块使用)
下面介绍的是webpack-cli的使用
安装
输入下面指令,意思是
创建webpack-demo文件夹
进入webpack-demo
初始化npm -y
参数表示自动输入yes
安装webpack
安装webpack-cli
1 | mkdir webpack-demo |
执行完之后会生成一个package.json,这是npm生成的文件,定义了这个项目所需要的各种模块,以及项目的配置信息。关于npm和package.json这里不做过多阐述
如果你想要了解
package.json
内在机制的更多信息,推荐阅读 npm 文档。
创建文件
创建以下目录结构
1 | webpack-demo |
各个文件的内容如下
./src/index.js
1 | function component() { |
./index.html
1 | <!doctype html> |
./package.json
1 | { |
private的作用是防止项目被发布
在开始使用webpack前,观察目录结构,默认情况下webpack的入口是src/index.js,index.js的执行需要依赖lodash
这在index.html体现出来,
1 | <script src="https://unpkg.com/lodash@4.16.6"></script> |
在index.js引入之前引入了lodash
但index.js未显式声明引入lodash,这时webpack会假定存在全局变量 _
lodash这个库的使用方式就是用
_
操作,与jquery的$
类似
不过这样做会有一些问题
- 无法立即体现,脚本的执行依赖于外部扩展库(external library)。
- 如果依赖不存在,或者引入顺序错误,应用程序将无法正常运行。
- 如果依赖被引入但是并没有使用,浏览器将被迫下载无用代码。
这时候执行
这句话意思是,执行安装在node_module的webpack控制台程序
1 | npx webpack |
生成的文件中不会有lodash的变量_
,将会报错
下面src/index.js通过webpack打包后生成的文件,默认在dist目录下
- 这里只有
main.js
- 通过查看里面也没有
lodash
的脚本 index.htm
l也不存在
显然我们这不是我们预期的输出
调整
这里需要手动将index.html移入dist文件夹
更改script
标签
1 | <!doctype html> |
这里删除了两个script标签,引入了main.js
1 | <!doctype html> |
不过这里的main.js仍然没有引入lodash
这时候执行
1 | npx webpack |
访问index.html查看控制台
可以看出 _
没有被定义
通过npm安装lodash并通过import引入
通过npm 安装lodash
1 | npm install --save lodash |
引入到index.js
只是在第一行增加了import _ from 'lodash';
1 | import _ from 'lodash'; |
现在,可以打包我们的程序了
1 | npx webpack |
执行安装在node_module的webpack控制台程序
查看页面
这说明代码已经执行,现在已经没问题了
使用配置文件
这时我们已经基本了解webpack的工作流程,不过大多数情况下,都要通过webpack.config.js
配置文件来控制webpack文件的入口,出口,需要用到的loader、插件
该内容将在下一章进行讲解