简介

为自己了解webpack的过程做一个总结，也希望对想要了解的小伙伴有所帮助。

准备工作

既然是学习了解webpack，那我假定你了解npm和node.js了。

核心概念

先对核心概念有个大概的了解，不理解也没关系，看完后面的例子应该会有一定的认识。

  • Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  • Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开- 始递归找出所有依赖的模块。
  • Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
  • Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
  • Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

环境准备

1.新建一个工程目录study_webpack(用于尝试各种例子) 2.全局安装webpack（为了方便用命令，安装的版本看下面的文件）

cnpm install -g webpack
cnpm install -g webpack-cli
复制代码

tip:考虑到后续的一些插件的版本问题，放出我的package.json

{"name": "webpack-study-demo","version": "1.0.0","description": "","main": "index.js","scripts": {},"keywords": [],"author": "","license": "MIT","devDependencies": {"css-loader": "^1.0.1","html-webpack-plugin": "^3.2.0","vue-loader": "^15.4.2","vue-template-compiler": "^2.5.17","webpack": "^4.25.1","webpack-cli": "^3.1.2"},"dependencies": {"vue": "^2.5.17"}
}
复制代码

demo01(one entry)

基本栗子演示单个入口webpack打包结果，后续例子无特殊说明均采用该目录结构

在demo1目录下准备调用文件dist/index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!-- 引入打包的文件 --><script src="./bundle.js"></script>
</body></html>
复制代码

入口文件index.js

document.write("<h1>Hello World</h1>");
复制代码

webpack配置webpack.config.js

const path=require('path');module.exports = {entry: "./index.js",output: {filename: "bundle.js",path:path.resolve(__dirname,"./")}
};
复制代码

在终端中执行webpack命令（webpack.config.js所在的目录）

tip:webpack默认读取目录下的webpack.config.js的配置文件。

执行结果

Hash: 7a488a408fbb07bfacd8
Version: webpack 4.25.1
Time: 273ms
Built at: 2018-11-11 16:19:40Asset       Size  Chunks             Chunk Names
bundle.js  968 bytes       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./index.js 40 bytes {0} [built]WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
复制代码

第一个webpack的例子成功了，是不是很简单，马上就可以成为webpack配置工程师了，想想还有些小激动。

demo02(multiple entry)

往往一个应用不仅仅只有一个入口（第三方库啦，多个页面啦，等等）

在demo2目录下面写调用文件dist/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script src="./bundle1.js"></script><script src="./bundle2.js"></script>
</body>
</html>
复制代码

然后是入口文件module1.js和module2.js

document.write("<h1>Hello Module1</h1>");
复制代码
document.write("<h1>Hello Module2</h1>");
复制代码

打包结果执行结果

demo03(use loader)

Webpack 把一切文件看作模块,要支持非 JavaScript 类型的文件，需要使用 Webpack 的 Loader机制

target：编译.vue文件

准备工作：

cnpm i vue --save
cnpm i vue-loader --save-dev
cnpm i css-loader --save-dev
cnpm i vue-template-compiler --save-dev
复制代码

新建demo03目录，调用文件dist/index.html。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"></div><script src="./bundle.js"></script>
</body>
</html>
复制代码

入口文件index.js

import Vue from "vue";
import App from "./index.vue";/* eslint-disable no-new */
new Vue({el: "#app",template: "<App/>",components: { App }
});
复制代码

index.vue文件

<template><div id="app">{{msg}}</div>
</template><script>
export default {name: "app",data: function() {return {msg:"hello loader"};}
};
</script><style>
</style>
复制代码

最后是配置文件webpack.config.js

const VueLoaderPlugin = require("vue-loader/lib/plugin");module.exports={entry:"./index.js",output:{filename:"bundle.js"},resolve: {alias: {vue$: "vue/dist/vue.js" // 设置别名，找到node_modules下的vue},extensions: [".js", ".json",".vue"] // 支持.vue扩展},module:{rules:[{test:/\.vue$/,loader:"vue-loader" // 添加vue-loader}]},plugins:[new VueLoaderPlugin() // vue-loader需要添加插件配置]
}
复制代码

相比前面的例子抛开其中的优化配置(别名之类的)，实际上添加了一个module.rules选项，这个选项的作用专门用来配置loader，其中test字段通过正则匹配模块扩展名，告诉webpack对非javascript模块应用什么loader。

多个loader的例子容我省略，你（我）辣（偷）么（个）机（懒）智

demo04（use plugins）

Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性

所以，综上所述，plugins就是用来扩展webpack的，比如工作流（代码压缩）,提高开发效率（热重载，静态服务器）等。

ps:其实上一个例子有plugins配置，不过那是vue-loader需要

target:动态生成html

前面的例子，我们的调用的html都是预先生成的，实际开发中几十个页面打包一次纯手动成本太高，我们以html-webpack-plugin插件为例

入口文件index.js

var name1="hello";
var name2="plugins";document.write(`<h1>${name1} ${name2}</h1>`);
复制代码

配置文件webpack.config.js

先安装插件

cnpm i html-webpack-plugin --save-dev
复制代码
var HtmlWebpackPlugin = require("html-webpack-plugin");
var path = require("path");module.exports = {entry: "./index.js",output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js"},plugins: [new HtmlWebpackPlugin({ // 在插件数组里面加一个插件就好了，是不是so easytitle:"demo04 title",template:"./template.html",inject:true})]
};
复制代码

tip:该插件我们配置一个html模板

模板文件template.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body></body>
</html>
复制代码

想想几十个页面通过一个模板生成是不是效率会高上不少呢

未完待续

webpack配置工程师（一）：基本篇相关推荐

  1. vue webpack 访问php,实例详解vue-cli优化的webpack配置

    最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果.本文主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现 ...

  2. 详解Linux运维工程师打怪升级篇

    详解 Linux 运维工程师打怪升级篇 积累经验篇 做运维也快4年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师 是从一个呆逼进化为苦逼再成长为牛逼 ...

  3. vue-cli webpack配置分析 - chenBright - SegmentFault 思否

    相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚 ...

  4. Webpack配置实战

    前言 本篇将从实践出发,搭建一个基础的支持模块化开发的项目,在第二章节<进阶配置>中使用 webpack 搭建一个 SASS + TS + React 的项目. 一.基础配置 接下来一起配 ...

  5. 网络工程师日常-工具篇

    网络工程师日常-工具篇 大家可能会好奇网络工程师的包里都会有一些什么工具,下面简单介绍一些必备和常用的吃饭家伙. 本文推荐的工具适合厂商.集成商的技术工程师的日常工作使用. U盘 简介 U盘是USB( ...

  6. Flask + Nginx + React + Webpack 配置解决跨域问题

    用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...

  7. webpack配置vue组件加载器

    前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...

  8. 常用的webpack 配置

    const path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); let VueLoaderP ...

  9. vue-cli中的webpack配置

    编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...

  10. 通过webpack配置vue项目页面title

    vue 项目创建之后,在index.htm里面的title,使用 htmlWebpackPlugin.options.title 进行的展示. 调整 webpack 配置最简单的方式就是在 vue.c ...

最新文章

  1. 【字符串】manacher算法
  2. LINUX DNS服务的配置(一)
  3. 大数据下Limit使用(MySQL)
  4. java-HTMLjavaSkcriptCSSjQueryajax
  5. dojo Quick Start/dojo入门手册--面向对象,定义Class
  6. java与c++中的对象序列化分析
  7. C语言宏使用常见问题
  8. 大学生游戏静态HTML网页作业--美丽中国
  9. H3C-H3CNE 华三网络工程师从入门到精通 自学视频课程[肖哥]-肖宗鹏-专题视频课程...
  10. wpa_supplicant使用方法(WiFi工具)
  11. 关于键盘右边的 数字小写键盘不能使用的解决办法
  12. linux飞行模式切换,光遇飞行的两种模式区别 飞行模式切换和区别分析
  13. ts转换mp4 linux_佳佳AVI MP4格式转换器下载-佳佳AVI MP4格式转换器免费版下载v6.5.5.0...
  14. 2022年食盐市场现状
  15. 2019余额不足，技术人如何高效充电？
  16. python学生成绩管理系统-增删查改
  17. java小小工具 对象信息管理
  18. 让动画不再僵硬：Facebook Rebound Android动画库介绍
  19. QtEmbeded移植到达芬奇6441平台
  20. 硬盘保护卡破解--小哨兵篇

热门文章

  1. JavaScript函数的4种调用方法详解
  2. 导航菜单点击后高亮显示
  3. Hive 连接 HBase 错误处理
  4. Mariadb数据库设置及操作 一主多从 备份还原（实测笔记）
  5. R中的 url编码 和 解码
  6. flask框架+pygal+sqlit3搭建图形化业务数据分析平台
  7. （01背包 排序+特判）饭卡（hdu 2546）
  8. DataGrid实现单选功能，将DataGrid绑定的单选钮放在一个组里
  9. C#中的类型转换（转载）
  10. Lua 函数参数 默认实参