【node.js】webapck --打包工具①

原创已于 2022-09-26 15:55:21 修改 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #webpack打包工具 #node #node.js #node webpack

于 2018-04-14 12:53:04 首次发布

node 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了Node.js中模块化的优点及其实现方式，并介绍了如何利用Webpack解决浏览器环境中模块化的问题，包括安装配置和打包命令。

前言：nodeJS的一大优点之一就是js文件的模块化。每一个js文件都可以是一个模块，这意味这我们在弄大型项目的时候，不再需要定义大量的全局变量了。

一、js文件的弊端

如果a.js文件要访问b.js里定义的变量的话，那b.js定义的变量得定义在全局，那样就会造成全局环境的污染。（如果全局定义的变量有重名的，会造成很大困扰）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script src="a.js"></script>
<script src="d.js"></script>
<script>
console.log(str + '--1');
a();
b();
</script>
</head>

<body>
</body>
</html>

// a.js
function a(){
	console.log(str+' --a');
}

//b.js
var str = 'hello world';
function b(){
	console.log(str + ' --b');
}

二、node模块概念

在一个模块(一个文件)中定义的变量，其作用域范围是当前模块，外部不能够直接的访问。如果想让一个模块能够访问另一个模块中定义的变量，可以通过module.exports对外提供访问。

//a.js
var str = require('./b').str;
console.log(str);

//b.js
var str = 'hello world';
module.exports.str = str;     //对外提供访问

在node的环境下运行a.js，会成功输出在b.js中定义的变量str，而不会说有全局环境污染的问题。

然后问题来了，这样的写法只能node上运行，无法运用到浏览器中。要怎么才能运用到浏览器中呢？这就运用到了webpack打包工具了。

三、webpack的使用

1、webpack安装到全局下的命令

①、安装webpack

在cmd终端输入

npm install webpack --g

②、输入webpack -v 检测是否安装成功

③、如果能显示webpackb版本信息，cd到项目目录中，输入打包命令

webpack  a.js  pack.js

这时项目中就多多出一个pack.js文件，只需要在index.html中引用pack.js。这时就会浏览器控制台中就会输出hello world了。

相关链接：webpack安装成功，但是打包失败原因

2、webpack安装到项目目录下的命令

①、cd到项目目录中

②、安装webpack

在cmd终端输入

npm init -y     //创建package.json文件
npm install webpack --save-dev

③、输入webpack -v 检测是否安装成功

④、如果能显示webpackb版本信息，输入打包命令(window系统下命令)

.\\node_modules\\.bin\\webpack a.js pack.js

这时项目中就会多出一个pack.js文件。

3、通过创建一个webapck.config.js文件来执行打包

const path = require('path');

module.exports = {
  entry: './a.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'pack.js'
  },
};