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文件的主要文件,打包成了一个。