webpack入门(2): 安装与使用

webpack入门(2): 安装与使用

下面就来通过例子讲解webpack的安装,基本操作

webpack 是一个用于编译Javascript模块的工具,在安装webpack之后,可以通过

  • CLI (command line interface 就是在控制台上使用 )
  • API (在js中导入模块使用)

下面介绍的是webpack-cli的使用

安装

输入下面指令,意思是

创建webpack-demo文件夹

进入webpack-demo

初始化npm -y参数表示自动输入yes

安装webpack

安装webpack-cli

1
2
3
4
5
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev

执行完之后会生成一个package.json,这是npm生成的文件,定义了这个项目所需要的各种模块,以及项目的配置信息。关于npm和package.json这里不做过多阐述

如果你想要了解 package.json 内在机制的更多信息,推荐阅读 npm 文档

创建文件

创建以下目录结构

1
2
3
4
5
  webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js

各个文件的内容如下
./src/index.js

1
2
3
4
5
6
7
8
9
10
function component() {
const element = document.createElement('div');

// Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
}

document.body.appendChild(component());

./index.html

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>

./package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  {
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}

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目录下

1563289612108

  • 这里只有main.js
  • 通过查看里面也没有lodash的脚本
  • index.html也不存在

显然我们这不是我们预期的输出

调整

这里需要手动将index.html移入dist文件夹

更改script标签

1563289812766

1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

这里删除了两个script标签,引入了main.js

1
2
3
4
5
6
7
8
9
10
11
  <!doctype html>
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>

不过这里的main.js仍然没有引入lodash

这时候执行

1
npx webpack

访问index.html查看控制台

1563290764739

可以看出 _没有被定义

通过npm安装lodash并通过import引入

通过npm 安装lodash

1
npm install --save lodash

引入到index.js

只是在第一行增加了import _ from 'lodash';

1
2
3
4
5
6
7
8
9
10
11
12
import _ from 'lodash';

function component() {
var element = document.createElement('div');

// Lodash 通过import引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
}

document.body.appendChild(component());

现在,可以打包我们的程序了

1
npx webpack

执行安装在node_module的webpack控制台程序

查看页面

1563290852753

这说明代码已经执行,现在已经没问题了

使用配置文件

这时我们已经基本了解webpack的工作流程,不过大多数情况下,都要通过webpack.config.js配置文件来控制webpack文件的入口,出口,需要用到的loader、插件

该内容将在下一章进行讲解

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×