初识webpack - 掘金

什么是webpack

在模块化编程盛行的今天，每一个js、css都可以独立存在，而每一个独立存在的文件又可能采取不同的工程化语言方法，比如typescript写js，用sacc写css等等，这时候我们就需要一个简单的工具，完成这种统一编译解析的功能。

webpack 处理程序的时候，他会递归地构建一个依赖关系图，其中包含应用程序的每一个模块，然后将所有这些模块打包成一个或者多个 bundle（包）

webpack的安装方法

// 推荐局部安装，当维护一些老项目的时候有可能因为webpack的版本出现一些问题

创建一个文件夹打开cmd 输入 npm init 指令
安装webpack webpack-cli (--save-dev 开发阶段使用 --save 生产环境还要依赖)
- npm install webpack --save-dev
- npm install webpack-cli --save-dev

注意事项

使用npx webpack -v npx webpack-cli -v 查看版本，验证是否安装成功）
npm 安装指定版本的库 npm install webpack@4.41.1 --save-dev
当我们不知道一个库到底又多少个版本 npm info webpack

webpack的初步接触

// 我们用一个dome来演示在文件中新建 src目录然后在新建index.html 和 js文件夹

// 在未使用工程化构建项目编码时 html 与 js文件分离，当我们项目越大时文件就越大，速度慢，难以维护

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 初步接触</title>
</head>
<body>
	<p> 这是基本网页内容</p>
    <script scr="./js/index.js"></script>
</body>
</html>

// index.js
let root = document.querySelector('body');

let eleHeader = document.createElement('h1');
eleHeader.innerText = '这是网页头部';

let eleSideBar = document.createElement('div');
eleSideBar.innerText = '这是网页侧边栏';

let eleContent = document.createElement('div');
eleContent.innerText = '这是网页主要内容';

// 添加进body
root.appendChild(eleHeader);
root.appendChild(eleSideBar);
root.appendChild(eleContent);

// 稍微懂点 html 和 js 分离的

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 初识</title>
</head>
<body>
    <p>这是网页基本内容</p>

    <!-- 在这里我们要注意代码的先后顺序，否则会影响页面效果 -->
    <script src="js/index.js"></script>
    <script src="js/header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/content.js"></script>
</body>
</html>

// index.js
let root = document.querySelector('body');

// header.js
let eleHeader = document.createElement('h1');
eleHeader.innerText = '这是网页头部';
root.appendChild(eleHeader);

// sidear.js
let eleSidebar = document.createElement('div');
eleSidebar.innerText = '这是网页侧边栏';
root.appendChild(eleSidebar);

// content.js
let eleContent = document.createElement('div');
eleContent.innerText = '这是网页主要内容';
root.appendChild(eleContent);

// 在稍微封装一下

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 初识</title>
</head>
<body>
    <p>这是网页基本内容</p>

    <!-- 我们只需要在html中引入跟文件即可 -->
    <script src="js/index.js"></script>

</body>
</html>

// index.js
import { createContent } from "./contnet";
import { createSidebar } from "./sidebar";
import { createHeader } from "./header";

let root = document.querySelector('body');

// 进行调用 只需要在这里保证顺序
createHeader(root);
createSidebar(root);
createContent(root);

// header.js
export const createHeader = (root) => {
  let eleHeader = document.createElement('h1');
  eleHeader.innerText = '这是网页头部';
  root.appendChild(eleHeader);
}

// sidear.js
export const createSidebar = (root) => {
  let eleSidebar = document.createElement('div');
  eleSidebar.innerText = '这是网页侧边栏';
  root.appendChild(eleSidebar);
}

// content.js
export const createContent = (root) => {
  let eleContent = document.createElement('div');
  eleContent.innerText = '这是网页主要内容';
  root.appendChild(eleContent);
}

依然有问题

依然解决不了代码文件需要按顺序，否则就会出错
网页引入文件过多，网页加载的时候需要大量的HTTP请求
对老版本浏览器或者其他浏览器存在兼容问题

所以就引入的webpack 来构建和开发项目

执行 npx webpack 文件路径

npx webpack src/js/index.js

打包完成之后你将会看到一个index.js 所依赖的文件，然后手动新建 index.html 引入main.js 即可

webpack 基础配置

// 在根目录新建一个 webpack.config.js 配置文件 如果你不创建，就按照默认来打包

const path = require('path'); // 导入 node 中 path模块 webpack时运行在node环境中的
module.exports = {
  entry: './src/dome3/js/index.js', // 入口文件，构建依赖图的起点
  output: {
    filename: "index.js", // 打包的文件名称
    path: path.resolve(__dirname, 'bundle') // 出口文件，打包结束存放的位置，以及文件夹名称
  }
}

package.json 的 script命令映射表

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // npm run build 即可打包
  },

打包结束之后的一些信息参数

Hash 本次打包唯一的hash值，当你没有改变代码时，再次打包依然是一样的

Version 使用的webpack版本

Time 打包所耗时间

Asset 打包结束的最终文件（可能有多个文件）

size 打包文件大小

chunks js文件对应的ID

chunks Name js文件对象的名字

webpack 的 loader -- file-loader

loader 让webpack处理一些非js文件，例如图片，视频等

file-loader 作用

当file-loader 检测到test 的正则表达式的规则的话，回把改资源移动到output的指定文件夹下，并且设置名字
当把图片挪到output的指定文件夹之后，file-loader 会把该图片相对于文件夹的相对位置作为返回值作为返回值，返回给引入文件时定义的变量
上述动作不限于图片，可以用于一切文件

// npm install --save-dev file-loader
const path = require('path');

module.exports = {
  mode: "development", // 开发环境 production 生产环境
  entry: './src/dome3/js/index.js',
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/i,
        use: {
          loader: "file-loader",
          options: {
            outputPath: './images'
            // name  设置名字规则 默认32位的hash值
          }
        }
      }
    ]
  }
}

url-loader

// npm install --save-dev url-loader
// url-loader 解析的资源里面，图片文件不在意，其他一切正常，url-loader整体上和file-loader差不多
// 但是就是在默认情况下，图片回把解析成为base 64 编码么热不是直接生成一个文件
const path = require('path');

module.exports = {
  mode: "development", // 开发环境 production 生产环境
  entry: './src/dome3/js/index.js',
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/i,
        use: {
          loader: "file-loader",
          options: {
            outputPath: './images'
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 2048 // 小于2048字节就解析成base 64，大于就直接打包成文件
            }
          }
        ]
      }
    ]
  }
}