从安装Node.js到使用webpack管理（一）

webpack官方网站：https://webpack.docschina.org/

Node.js官方网站以及各版本：https://nodejs.org/en/

Node.js各版本下载：https://nodejs.org/en/download/releases/

文章中使用的Node.js版本为10版本

IDE工具为vscode

一：安装Node.js

在官网下载安装后，可以在命令行执行语句：node --version来查看自己所安装的node版本，以及是否成功安装。

然后使用 "npm install webpack"安装全局的webpack

如果遇到报错：“无法加载文件，因为在此系统上禁止运行脚本”。在右下角菜单中搜索“windows powershell”，点击运行，并输入指令：

set-ExecutionPolicy RemoteSigned

 然后再重新执行安装。

二：打开vscode，新建项目，创建文件

按下列文件目录创建文件：

其中，dist里面的文件，是通过webpack来生成的，不是自己创建的。index.html是需要运行打开的网页界面。main.js文件在index.html中引用。同时在main.js中来引用另外两个文件info.js和mathUtils.js

main.js文件代码，require为commonjs的方式来导入其他js文件。用const来声明两个在mathUtils中的变量。add和mul在mathUtils中为函数方法，两个数的和以及两个数的积。用ES6导入的方式，从info.js文件中使用三个变量，并用log输出这些变量。

const { add, mul } = require('./mathUtils')

console.log(add(20, 30));
console.log(mul(20, 30));

import { name, age, height } from './info';

console.log(name);
console.log(age);
console.log(height);

 info.js文件采用ES6的方式，导入info.js文件后，export指定的变量在定义的同时也声明可以在其他文件中使用。

export const name = 'hrc'
export const age = 18
export const height = 1.63

mathUtils中的代码，采用commonjs的方式，使用module.exports的方式，来声明哪些变量是可以被其他文件使用的。其中的add和mul为方法。

function add(num1, num2) {
    return num1 + num2;
}

function mul(num1, num2) {
    return num1 * num2
}

module.exports = {
    add,
    mul
}

打开vscode的终端，进入项目所在的文件目录，然后运行

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

webpack为我们之前通过npm所安装的，可以通过webpack --version来查看版本。webpack将打包src目录下的main.js文件，并将在dist目录下生成一个bundle.js文件。main.js文件中所引用的其他js文件也会被导入为一个文件。

通过vscode启动index.html文件，按F12可以查看打印出的日志。

如果main.js的文件内容发生了改变，或者引用的js文件发生了改变。则需要重新运行指令来重新生成bundle.js文件。

初步的通过webpack指令来让依赖多个js文件的主要文件，打包成了一个。