webpack学习笔记-0-为什么需要webpack

来源：互联网发布：自动关注软件下载编辑：程序博客网时间：2024/04/30 07:42

一、背景：

网上有一篇很好的介绍webpack的文章《入门webpack，看这篇就够了》，后面简称《入门webpack》但是由于这篇文章所介绍的是webpack1的写法，有的写法使用webpack2时会有问题。另外有些细节并未涉及。因此本文是跟着这篇文章学习webpack，以及遇到问题和解决方案的笔记。

二、为什么需要webpack：

这个在上述文章里已经介绍的比较清楚。

假设有这样的场景：

1.有一个很大的单页应用，为了提高开发效率，要将这个项目拆成多个模块，开发完成后，这个项目可以正常跑了。但是因为多个模块是存在不同文件中的，因此加载这个单页应用时，会发出多次请求。这时我们希望能够把所有模块打包成一个文件，这样可以减少请求次数，提升体验。

2.在开发这个单页应用中，同样是为了提高开发效率，使用了一些js和css的扩展语言，如TypeScript及Less、stylus，这些扩展使我们可以更简洁优雅地写代码，但是开发完成开始部署时，需要将它们进行相应的转换，转换成浏览器支持的语言。这时，我们希望能够有个工具可以以很大的自动化程度去完成这个转换工作。

3.在这个单页应用开发完成后，我们为了提高其性能，希望做一些列处理，比如把js进行压缩。

在单页应用的开发中，一般情况都会遇到这3种场景，而在这三种场景webpack可以下满足我们的上述需求。

通常webpack被认为是一个模块打包机，实际上它的功能不仅限于模块打包（即第一种场景下的功能），还可以进行扩展语言翻译和文件优化处理。

那么我们使用webpack会达到一个什么样的效果呢？还是以上述3种场景为例。对于这个单页应用，webpack将会从我们指定的入口文件进入，然后按照CommonJS规范分析依赖(require, exports, import等关键字)，将依赖的所有文件使用我们指定的对应的加载器处理后打包到同一个文件中去。

从webpack工作过程可以看出，在基于webpack的开发中，我们需要按照CommonJS去管理各个模块的依赖。

webpack的使用方法有命令行和配置项，本文主要介绍配置项方法。这也是实际项目中主要的方式。配置项方式使用webpack时，只要在配置文件中定义好不同格式文件的处理方式和其他处理插件，然后输入“webpack”命令，webpack就可以自动化地执行打包过程了。

三、demo：

接下来构建一个demo来学习webpack的简单用法，这个demo希望实现这样的效果：有一个入口页面，也就是我们访问的html页面，交互逻辑用模块化的js实现，最终js（后面会提到，css也会被打包）会被打包到一个文件中。这样html页面只需要一个script标签引用这个打包好的js就可以了。

1.首先创建文件夹webpack-demo，目录如图

其中，output用来存放webpack打包的最终文件；src中的js文件是js的各个模块，main是主模块，也就是webpack入口js文件；index.html是入口页面。各个文件中代码如下：

index.html:

<!DOCTYPE html><html><head>    <title>webpack-demo</title>    <link rel="stylesheet" type="text/css" href="./src/main.css">    <script type="text/javascript" src="./output/main.js"></script></head><body >    <div id="container">        <div class="button">            点击弹出问候        </div>    </div></body><script type="text/javascript">    var btnElement = document.getElementsByClassName('button')[0];    bindButtonElementEvent(btnElement);</script></html>

greet.js：

/** * 弹框问候 */define(function (require, exports) {    return function () {        alert('Hello, webpack!')    }});

main.js:

var greet = require('./greet.js');/** * 为按钮绑定弹框问候 */function bindButtonElementEvent(btnElement) {    btnElement.addEventListener('click', function () {        greet();    });}window.bindButtonElementEvent = bindButtonElementEvent;

2.然后我们对该项目初始化，命令行输入命令

npm install

然后一路回车，会在项目中生成名为package.json的文件。

通过这个文件我们可以对该项目进行相关配置。这个命令在《入门webpack》中有更详细介绍。

3.安装webpack

命令行输入：

npm install webpack -g // 全局安装npm install webpack --save-dev // 只在当前项目里安装

4.配置webpack

即写webpack配置项文件

在项目根目录创建名为webpack.config.js的文件，代码如下：

module.exports = {    // 入口文件路径，__dirname是根目录    entry: __dirname + '/src/main.js',    // 打包生成文件    output: {        path: __dirname + '/output',        filename: 'main.js'    },}

这时，命令行输入

webpack

就可以让webpack工作了，webpack将会根据webpack.config.js文件，将以./src/main.js为入口的模块打包，输出到./output/main.js中。这样index.html将会引入打包后的js文件，从而实现了相关的交互。

5.配置webpack命令

为了更方便地运行webpack，我们可以在package.json中配置npm命令

我们可以在项目的package.json文件中进行配置，

这样，命令行输入

npm start

就相当于输入

webpack

这个配置在《入门webpack》中有更详细的介绍。

四、后记：

本文介绍了个人对为什么需要webpack的一些粗浅的理解和webpack打包初步使用说明，构建了一个demo，这个demo将会贯穿后续webpack学习的整个过程。

demo地址：

https://github.com/KIDFUCKER/webpack-demo.git

分支：v1-entry

使用说明：

命令行：

git clone https://github.com/KIDFUCKER/webpack-demo.gitcd webpack-demonpm installnpm start

然后打开index.html就可以了

阅读全文

1 0