Webpack（一）：安装和基础配置

2019 年 11 月 7 日
筆記

记录 webpack 安装和配置的过程，以及即将遇到的各种坑. 🙂

环境：win10，[email protected]

1. webpack 安装

1.1 安装过程

在安装 webpack 之前，需要先安装 Nodejs（这个过程会自动帮你安装好 npm）。路径的话默认是 C 盘，因为强迫症，我把它安装在了 D 盘。
安装好 Nodejs 后，在 cmd 命令行里可以通过 node -v 和 npm -v 分别查看版本信息，一般这里没啥问题。
之后一定不要忘记配置 Nodejs 的环境变量（具体步骤看1.2）
接着就是安装 webpack 了，因为练手的项目用的是 4.x 之前的版本，我这里用 npm install [email protected] -g 进行全局安装。
webpack -v 查看版本信息，没毛病

1.2 Nodejs 环境变量配置

之前急着搭建博客，所以 Nodejs 安装好后就没管了，今天 webpack -v 命令死活用不了（提示“webpack 不是内部命令”），才发现是因为当时忘记配置环境变量了。

分两步：

（1）修改全局安装位置

默认情况下，Nodejs 会给系统环境创建两个环境变量：

用户变量 PATH： C:UsersAdminAppDataRoamingnpm
系统变量 PATH：D:Nodejs

第一个变量指定了全局安装的东西默认存放的位置，因为我实在不想放在 C 盘，于是得改一下这个默认配置，具体做法：

首先在 Nodejs 文件夹中新建 node_global 和 node_cache 文件夹，分别用于存放全局安装包和临时缓存位置；
接着 cmd 里设置全局安装路径和全局缓存路径（也就是刚才那两个）：

npm config set prefix "D:Nodejsnode_global"  npm config set cache "D:Nodejsnode_cache"

之后可以用 npm root -g 查看一下

这之后再次安装 webpack，不出意外它就会出现在 Nodejs/node_global 文件夹下了。不过我们还是查看不了版本，因为环境变量还没修改。

（2）修改环境变量

我的电脑——右键属性——高级系统设置——高级———环境变量：

用户变量：修改 PATH 为 D:Node.jsnode_global
系统变量：新增 NODE_PATH ，设置值为 D:Node.jsnode_global

PS：第二个貌似也可以设置为 D:Node.jsnode_globalnode_modules

之后重启 cmd （一定要重启，不然是不生效的），再次 webpack -v，这次就可以正常使用了。

2. 基本结构搭建

1.练手的话先新建一个项目，然后 cd 进去：

mkdir webpack-learning  cd webpack-learning

以后就是在这个文件夹里搞事情了。

2.创建 index.html 文件和 src 文件夹，后者存放打包前的文件

3.通过 npm init 生成 package.json 文件，这个文件用来描述项目信息以及依赖配置等。这里基本一路回车就好。

4.通过 npm install [email protected] --save -dev本地安装 webpack。本地安装可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等。

5.手动创建 webpack.config.js 文件，这个文件用来配置 webpack 的运行方式

那么，现在项目结构看起来大概如下：

3. 配置 webpack.config.js 和 package.json

先简单配置一下 webpack.config.js:

const path = require('path');  module.exports = {      entry:'./src/main.js',      output:{          path:path.resolve(__dirname,'dist'),          filename:'bundle.js'      }  }

这里定义了入口和出口。入口(entry) 指示 webpack 应该使用哪个模块文件来作为构建内部依赖的开始，进入入口起点后，webpack 会找出有哪些模块和库是入口 js 依赖的；出口(output) 是告诉 webpack 在什么地方输出它所创建的 bundles，以及如何命名这些打包文件。

我们新建几个文件来简单测试下。首先是module.js :

var num = 1;  function add(){      num++;  }  export {num,add}

main.js 作为入口文件：

import {num,add}  console.log(num)  add()  console.log(num)

将 main.js 进行打包：

$ webpack ./src/main.js ./dist/bundle.js

会发现项目文件夹下多出来一个dist文件夹，里面有一个打包生成的 bundle.js文件：

之后在 index.html 中直接引用该文件：

<script src="./dist/bundle.js"></script>

浏览器跑一下，没毛病。

不过，之前的打包命令太麻烦了，所以我们配置一下 package.json：

"scripts": {      "test": "echo "Error: no test specified" && exit 1",      "build": "webpack"    },

之后可以直接通过 npm run build 执行打包。