2019-07-16

7 分钟读完 (大约 990 个字)

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

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

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

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

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

安装

输入下面指令，意思是

创建webpack-demo文件夹

进入webpack-demo

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

安装webpack

安装webpack-cli

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 文档。

创建文件

创建以下目录结构

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

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

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

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

  return element;
}

document.body.appendChild(component());

./index.html

<!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

  {
    "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

<!doctype html>
<html>
  <head>
    <title>起步</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

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

  <!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';

import _ from 'lodash';

function component() {
    var element = document.createElement('div');
  
    // Lodash 通过import引入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());