webpack初体验之模块化开发

Posted 2020-10-17 黑色瓶子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack初体验之模块化开发相关的知识，希望对你有一定的参考价值。

写在前面的话

上次写过一篇关于webpack入门的博客，当时只是说借助node来完成开发，并用webpack打包以让浏览器识别。其实其主要思想就是实现前端模块化开发。

众所周知，历史上，javascript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这在开发大型的、复杂的项目时就变得很困难。这就需要一种模块加载机制，在ES6之前，就有一些模块加载方案，比如CommonJS和AMD，上篇文章就是用到CommonJS规范。但现在，ES6已经填补了Module这块空白。下面就简单说下利用webpack实现前端模块化开发。

实例

介绍

本文主要介绍webpack的入门，因为我自己也是刚上手webpack，还在学习阶段，所以会讲得很基础。对于没用过webpack的童鞋，看完能懂就是我的目的。你也可以参考我的上篇博客webpack入门。另外关于ES6模块化,我觉得你应该要提前会懂，我就不讲了，这里有更好的文档 ES6 Module

使用webpack之前的准备

新建一个文件夹，比如叫 webpack-demo，这个就是你的项目目录，然后在这个文件夹里再新建一个 src文件夹，名字可任意，在 src 文件夹里，如图新建几个文件：

每个文件其实都是一个模块，

a.js中：

export default function(){
    console.log(\'Module A\');
}

b.js中：

export default function(){
    console.log(\'Module B\');
}

index.js中：

import A from \'./a.js\'
import B from \'./b.js\'

A();
B();

index.html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack模块化开发</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

很显然，这就是一个模块化开发过程，html文件引入index.js，而index.js又依赖于a.js和b.js。我们想要的结果是在浏览器中打开html文件时，控制台中打印出：

Module A
Module B

然而事实上，当我们打开控制台时，显示：

这是因为目前我们前端开发，浏览器还不支持模块化，想要实现模块化功能，需借助webpack。

安装webpack

在此之前，你需要安装好node，并对npm有些了解，node安装完就自带了npm。

终端进入 webpack-demo 文件夹里，执行：

npm init

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，一路回车默认即可。

你也可以执行：

npm init -y

以避免被问一些问题。

这个命令执行后，会自动生成一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。

接下来，就在本项目里安装webpack依赖，同样是在 webpack-demo 文件夹里，执行：

npm install webpack --save-dev

可能会等一会儿，执行完毕后会生成一个node_modules文件夹，可能还有一个package-lock.json文件，你先不必在意它们干嘛的。

安装完webpack后，还需要新建一个webpack配置文件，默认文件名是webpack.config.js。

完成以上所有步骤后，文件夹的内容如下：

配置webpack.config.js文件

接下来，我们来配置一下 webpack.config.js 这个文件：

var path = require(\'path\');

module.exports = {
    entry:\'./src/index.js\',
    output:{
        path:path.join(__dirname,\'dist\'),
        filename:\'main.js\'
    }
}

entry是入口文件地址，本项目中，需引用的是index.js文件，所以它就是入口文件；

output定义出口，path是打包后的文件存储路径，它必须是一个绝对路径，可以借助node中的path模块，来拼接一个绝对路径。dist是一个文件夹，用来存储打包文件，没有则自动创建。filename则定义打包后的文件名，此文件就是存储在dist中的。