webpack 修改title_webpack学习教程（二）： 起步

原文链接：

webpack学习教程（二）： 起步​mp.weixin.qq.com

前言

上一篇文章我们介绍了webpack的5个基本概念，没有看过的小伙伴可以从下面链接进入。

webpack学习教程（一）： 基础概念​mp.weixin.qq.com

环境安装

想要学习wbepack，我们首先需要以下工具和环境：

• node.js 最新版本，官网链接：https://nodejs.org/zh-cn/；
• npm包管理工具，一般会跟随node安装而安装；
• vscode编辑器，也可以使用其他自己喜欢的工具；
• git-bash，可选，只是为了方便记录项目历史变更；

环境的安装不再赘述，基本只需要去node官网下载安装node之后就算准备好环境了。

package.json初始化

使用webpack之前，我们需要先创建package.json文件。可以直接创建，但是更推荐使用命令行来创建，因为这样能快捷设置package.json初始配置。

执行命令：

npm init

然后一路选择默认选项即可，最后会生成一个package.json文件如下：

// package.json
{
    
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "luckyatum",
  "license": "ISC"
}

有了package.json文件，我们后续做任何更改都会方便很多。接下来是webpack的安装。

安装webpack

webpack有两种安装方式：全局安装和本地安装；

全局安装很简单，只需要执行以下命令：

npm install --global webpack

但是不推荐全局安装。因为全局安装之后项目中的webpack将会指定使用该版本，所以在使用不同版本的webpack的项目中，可能会导致构建失败。

本地安装的话在package.json同级目录下执行命令：

npm install --save-dev webpack
// 指定特定webpack版本的安装
npm install --save-dev webpack@<version>

如果是webpack4.x以上版本，还需要安装webpack-cli：