webpack成长指北第1章---为何使用webpack

Boale_H
100 阅读2分钟

webpack指北第1章---为何使用webpack

背景

原始的开发，一个html对多个css，js有依赖的时候，就会在一个html文件内引入多个css，js文件，造成浏览器加载的缓慢，也不易于维护，特别是依赖不对应的时候，有些js依赖另一个js，引入顺序错误也会报错，因此需要webpack对这些文件的依赖进行一个管理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="styleSheet" href="./1.css" />
  <link type="text/css" rel="styleSheet" href="./2.css" />
  <link type="text/css" rel="styleSheet" href="./3.css" />
  <title>webpack学习</title>
</head>
<body>
  <div id="root"></div>
  <script src="./1.js"></script>
  <script src="./2.js"></script>
  <script src="./3.js"></script>
</body>
</html>

webpack的打包想法

当前html文件只引入当前自己需要的js,即index.html只引入index.js ，index .js需要什么依赖，就由index.js自己去引入，这样，index.html就只会请求一次静态文件，加快加载速度，也便于梳理代码与代码之间的依赖关系，也不会出现js引入顺序颠倒造成的错误，因为在使用依赖的时候，就已经做好了依赖的引入准备

webpack打包示例

编写项目代码

  • 首先我们按照刚刚说的想法，index.html只引入index.js一个入口js
    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) -->
  <link rel="shortcut icon" href="#" />
  <title>webpack学习</title>
</head>
<body>
  <div>这是webpack学习</div>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

  • index.js中引入自己需要的模块

    import Header from './src/components/Header/Header'; // ES Module 引入
import Content from './src/components/Content/Content'; // ES Module 引入
import SideBar from './src/components/SideBar/Sidebar'; // ES Module 引入

new Header();
new Content();
new SideBar();

  • 模块Header.js

    function Header() {
  const dom = document.getElementById('root');
  const header = document.createElement('div');
  header.innerText = 'Header';
  dom.append(header);
}

export default Header; // ES Module 导出

  • 模块Content.js

    function Content() {
  const dom = document.getElementById('root');
  const content = document.createElement('div');
  content.innerText = 'Content';
  dom.append(content);
}

export default Content; // ES Module 导出

  • 模块Sidebar.js

    function SideBar() {
  const dom = document.getElementById('root');
  const sideBar = document.createElement('div');
  sideBar.innerText = 'SideBar';
  dom.append(sideBar);
}

export default SideBar; // ES Module 导出

  • 浏览器打开index.html，发现报错了，import这样的引入方式，浏览器是无法识别的，会报错，因此就需要用到webpack这样的打包工具，它能识别模块的引入（相当于是翻译，让浏览器识别模块引入）
    在这里插入图片描述

npm 初始化项目

在使用webpack之前，我们先需要npm 初始化项目
在项目根目录打开终端，输入npm init -y,当项目初始化完成，会在项目根目录自动生成package.json
在这里插入图片描述

安装webpack和webpack-cli

在项目根目录打开终端输入

npm i webpack webpack-cli -D

使用webpack打包

终端输入输入

npx webpack ./index.js

打包index.js ，会在项目目录生成dist/main.js
在这里插入图片描述

将生成的main.js引入到html中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) -->
  <link rel="shortcut icon" href="#" />
  <title>webpack学习</title>
</head>
<body>
  <div>这是webpack学习</div>
  <div id="root"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

在浏览器打开index.html,浏览器已经成功识别模块引入的语法，运行成功在这里插入图片描述
这就是最简单的webpack打包案例

avatar
文章
阅读
粉丝