初识webpack

时间  2020-06-15
标签 webpack 繁體版
原文   原文链接

什么是webpack

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

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

webpack的安装方法

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

  • 建立一个文件夹 打开cmd 输入 npm init 指令css

  • 安装webpack webpack-cli (--save-dev 开发阶段使用 --save 生产环境还要依赖)html

    • npm install webpack --save-devjava

    • npm install webpack-cli --save-devnode

注意事项
  • 使用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文件夹webpack

// 在未使用工程化构建项目编码时 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>

    <!-- 在这里咱们要注意代码的前后顺序，不然会影响页面效果 -->
    <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);
}
复制代码
依然有问题
  1. 依然解决不了代码文件须要按顺序，不然就会出错
  2. 网页引入文件过多，网页加载的时候须要大量的HTTP请求
  3. 对老版本浏览器或者其余浏览器存在兼容问题
因此就引入的webpack 来构建和开发项目

执行 npx webpack 文件路径web

npx webpack src/js/index.js正则表达式

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

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值，当你没有改变代码时，再次打包依然是同样的npm

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',
            limit: 2048 // 小于2048字节就解析成base 64，大于就直接打包成文件
          }
        }
      }
    ]
  }
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程