Plain's Blog

休想打败我的生活🔥

  1. 1. 安装环境
  2. 2. 示例项目
  3. 3. 参考文档

安装环境

安装 Webpack

  1. 全局方式安装
1
$ npm install webpack -g
  1. 项目单独安装 🌟(推荐)
1
2
3
4
5
6
7
# 进入项目目录
# 确定已经有 package.json,没有就通过以下命令创建
$ npm init
# 安装 Webpack 依赖
$ npm install webpack --save-dev # 本体
$ npm install webpack-cli --save-dev # 脚手架
$ npm install webpack-dev-server --save-dev # 本地运行环境

示例项目

  1. 新建项目文件夹,比如 RegainJS
1
2
$ mkdir RegainJS
$ cd RegainJS
  1. 初始化 npm
1
$ npm init

初始化完成后会在项目根目录生成 package.json 配置文件,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"name": "regainjs",
"version": "1.0.0",
"description": "重拾 JS",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "plain-dev",
"license": "ISC",
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}

⚠️ 注意 name 不要有大写字母

  1. 安装 Webpack

上面已经介绍过命令,运行即可

1
2
$ npm install webpack --save-dev # 本体
$ npm install webpack-cli --save-dev # 脚手架

安装完成后会在项目根目录生成 node_modules 文件夹,项目中通过 npm 安装的依赖都会保存在这里

  1. 配置打包

在项目根目录创建 webpack.config.js 文件,它用来保存打包📦的配置信息,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path')

const config = {
// entry表示入口,webpack执行构建的第一步将从entry开始,可以抽象成输入
entry: {
main: './index.js'
},
// 输出文件存放的目录,必须是string类型的绝对路径
output: {
path: path.join(__dirname, './dist'),
// 发布到线上的所有资源URL前缀,为string类型
publicPath: '/dist/', // 放到指定目录下
// 输出文件的名称
filename:'index.js'
}
}

module.exports = config
  1. 创建 index.html 页面 📃

在项目根目录创建 index.html 文件,例如

1
2
3
4
5
6
7
8
9
10
11
12
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RegainJS</title>
</head>
<body>
<div id="app"> Hello World! </div>
<script src="/dist/index.js"></script>
</body>
</html>

很简单,显示一段文本,并引入打包后JS 文件

  1. 创建 index.js 脚本文件 ⚙️

在项目根目录创建 index.js 文件,例如

1
2
3
setTimeout(() => {
document.getElementById('app').innerHTML = 'Hello Webpack! ';
}, 500);

很简单,页面加载完成后,500毫秒后修改文本内容

  1. 运行项目

上面创建了一个很简单的页面和一些逻辑,现在通过 Webpack 让项目跑起来

创建本地运行环境需要安装 webpack-dev-server 包,它能在本地搭建一个运行环境,并且具有热更新代码等特性,安装命令如下

1
npm install webpack-dev-server --save-dev

安装完成后,需要修改一下 package.json 配置文件,在 scripts 下新增 dev 属性,配置 webpack-dev-server 的运行参数,例如

1
2
3
4
5
6
7
8
{
...
"scripts": {
"dev":"webpack-dev-server --open --host 0.0.0.0 --port 8888 --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}

其中几个参数的含义如下

  • host:主机地址,0.0.0.0 代表运行的域名可以输入** 127.0.0.1locallost本机IP,如果不配置默认localhost,也可以通过127.0.0.1访问,但是不能通过本机IP**访问。

  • port: 端口号,默认 8080

  • config: Webpack 配置文件

    ⚠️ 注意:json 文件不能写注释,而且属性名需要用双引号包裹。

配置完成后,在终端执行以下命令即可运行项目

1
npm run dev

  1. 效果

运行效果如下 🎉

试着更改 index.js 文件的逻辑,你会看到网页实时更新了,这就是 Webpack 的功劳 👍

参考文档

本文作者 : Plain
This blog is under a CC BY-NC-SA 3.0 Unported License
本文链接 : https://plain-dev.com/npm-webpack-init-demo-project/

本文最后更新于 天前,文中所描述的信息可能已发生改变