【前端开发】 浅析入门webpack的详细构建打包过程

【前端开发】 浅析入门webpack的详细构建打包过程_第1张图片

文章目录

  • webpack 简介
  • webpack 安装
  • 使用webpack管理
  • 使用一个配置文件
  • NPM 脚本
  • 完结

webpack 简介

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

webpack有四个核心

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

但是今天我们先来看看webpack 的打包构建的具体过程:

webpack 安装

  • 首先通过cd进入到E盘下(E:回车进入E盘),在E盘创建一个webpack-demo文件目录并进入webpack-demo目录下:
mkdir webpack-demo && cd webpack-demo
  • 初始化 npm,在本地安装 webpack:
npm init -y

【前端开发】 浅析入门webpack的详细构建打包过程_第2张图片

  • 接着安装 webpack-cli(webpack-cli用于在命令行中运行 webpack):
npm install webpack webpack-cli --save-dev

【前端开发】 浅析入门webpack的详细构建打包过程_第3张图片
这时候到E盘下,已经自动创建了相关的文件夹
【前端开发】 浅析入门webpack的详细构建打包过程_第4张图片
webpack-demo目录下新建index.htmlsrc文件下,src文件夹里新建index.js文件
【前端开发】 浅析入门webpack的详细构建打包过程_第5张图片
project目录:

 webpack-demo
  |- package.json
  |- node_modules
  |- index.html
  |- /src
    |- index.js

src/index.js

function component() {
     
  var element = document.createElement('div');

  // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html


<html>
<head>
  <title>webpack起步title>
  <script src="https://unpkg.com/[email protected]">script>
head>
<body>
<script src="./src/index.js">script>
body>
html>

配置 package.json 文件

配置 package.json 文件,确保自己的安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。
【前端开发】 浅析入门webpack的详细构建打包过程_第6张图片
package.json 配置好后如下:

{
     
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
     
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0"
  }
}

由于 index.js 并未显式声明需要引入 lodash,所以

你可能感兴趣的:(前端,vue,webpack)