1. webpack 简介

潇潇的雨幕里

已于 2022-03-06 18:39:41 修改

阅读量95

点赞数

分类专栏： webpack 从入门到精通文章标签： javascript webpack

于 2022-03-06 17:18:17 首次发布

本文链接：https://blog.csdn.net/pp_46918/article/details/123313427

版权

webpack 从入门到精通专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第 1 章：webpack 简介

1.1 webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

构建工具解析：
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>webpack简介</title>
    <link rel="stylesheet" href="./index.less">
</head>
<body>
    <h1 id="title">hello webpack</h1>
    <script src="./index.js"></script>
</body>
</html>

index.js

// 引入js资源
import $ from 'jquery';
// 引入样式资源
import './index.less';
// 引入图片、字体等其他资源

$('#title').click(() => {
  $('body').css('backgroundColor', 'deeppink');
})

index.less

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: pink;

  #title {
    color: #fff;
  }
}

在安装node的前提下执行：
npm init      // 输入报名，生成package.json
npm i jquery    // 下载安装  jquery  在生成的node_modules文件夹下，于index.js中引入

浏览器打开index.html文件时
1. 报错：Cannot use import statement outside a module
原因：ES6的模块化语法  import $ from 'jquery'; 浏览器无法识别; 
需要工具将ES6转换为ES5后编译
2. less中样式无法生效
原因： 浏览器无法解析less预处理样式文件；
需借助工具将less编译成css

构建工具就是整合前端需要的一系列的工具，一次性执行工具的作用；

静态模块打包器解析：

webpack通过入口文件将静态模块文件引入，形成chunk块，通过打包，输出bundle静态资源，最终可以在浏览器中运行；

在这里插入图片描述

1.2 webpack 五个核心概念

1.2.1 Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2 Output 输出

(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

1.2.3 Loader

Loader让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 
(webpack 自 身 只 理 解 JavaScript) ，
相当于将img/less等非js文件翻译成webpack能识别的文件

1.2.4 Plugins

插件(Plugins)可以用于执行范围更广的任务。
插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

1.2.5 Mode

模式(Mode)指示 webpack 使用相应模式的配置。

在这里插入图片描述

潇潇的雨幕里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1. webpack 简介

第 1 章：webpack 简介1.1 webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。...
复制链接

扫一扫

专栏目录