webpack入门

最新推荐文章于 2024-08-06 18:53:02 发布

Lioner-CSU

最新推荐文章于 2024-08-06 18:53:02 发布

阅读量180

点赞数

分类专栏：工具框架

本文链接：https://blog.youkuaiyun.com/qq_35630674/article/details/100540288

版权

框架同时被 2 个专栏收录

9 篇文章

订阅专栏

工具

1 篇文章

订阅专栏

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

简介

Webpack 是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过 loader 转换，任何形式的资源都可以当做模块，比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等；

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

现状

伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了 WebApp 模式。它们运行在现代浏览器里，使用 HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求；WebApp 通常是一个 SPA （单页面应用），每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JS 代码，这给前端的开发流程和资源组织带来了巨大挑战。

前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

安装 WebPack

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

安装

npm install webpack -g
npm install webpack-cli -g

配置

创建 webpack.config.js 配置文件

entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
output：输出，指定 WebPack 把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

执行

直接运行 webpack 命令打包

使用 WebPack

概述

使用 WebPack 打包项目非常简单，主要步骤如下：

创建项目
创建一个名为 modules 的目录，用于放置 JS 模块等资源文件
创建模块文件，如 hello.js，用于编写 JS 模块相关代码
创建一个名为 main.js 的入口文件，用于打包时设置 entry 属性
创建 webpack.config.js 配置文件，使用 webpack 命令打包
创建 HTML 页面，如 index.html，导入 WebPack 打包后的 JS 文件
运行 HTML 看效果

目录结构

image

模块代码

创建一个名为 hello.js 的 JavaScript 模块文件，代码如下：

exports.sayHi = function () {
  document.write("<div>Hello WebPack</div>");
};

入口代码

创建一个名为 main.js 的 JavaScript 入口模块，代码如下：

var hello = require("./hello");
hello.sayHi();

配置文件

创建名为 webpack.config.js 的配置文件，代码如下：

module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/bundle.js"
    }
};

HTML

创建一个名为 index.html，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

打包