Webpack5 监视文件改动，热部署。 2. 安装

webpack是一个现代JavasScript应用程序的模块打包器(module bunder)
官方网站www.webpackjs.com/

image.png

webpack的两大特点：1模块化 2打包
作用：
1将sass/less 等预编译的css语言转换成浏览器识别的css文件
2能够将多个预编译文件打包成一个文件
3 打包image/styles/assets/scrips/等前端常用的文件
4 搭建开发环境开启服务器
5 监视文件改动，热部署。
6 将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容

基本使用

webpack的两种使用方式：1命令行 2 配置文件 webpack.config.js

weback使用流程

1、创建项目

这里用的是命令创建项目，当然你也可以去鼠标右键创建项目

mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件
touch main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件

mkdir：创建文件夹
cd ..：返回所在目录的上级目录
touch：创建文件
app：用来存放原始数据和我们将写的JavaScript模块
common：用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）

目录结构

image.png

基础代码

index.html是主入口，需要设置根目录并且将打包后的文件导入

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

app.js是我们写的模块,并依据CommonJS规范导出这个模块,这里我们以输出welcome to use webpack为例

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "welcome to use webpack!";
  return greet;
}

main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中

const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());

2. 安装

因为安装webpack要用npm,所以安装之前我们首先要安装node
第一步 要在项目根目录用npm init初始化，生成package.json文件

npm init

初始化过程中会有好多提示，如果非正式项目下可以直接回车调过，括号里的都是默认的,正式项目下可以根据情况填写每一步

name: (webpackDemo) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (index.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者创始人
 license: (ISC) //许可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) // 这里直接输入yes就可以了

第二步 安装webpack

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

如果不想安装最新的版本那么得在webpack后面加一个@然后在填入你要安装的版本号，当然安装最新版本时可以加@版本号也可以不加@版本号