内容简介：大家好，今天由我给大家带来茶哥是位声音酥酥的小姐姐:girl:，总结的知识点也是满满的干货，接下来我将对茶哥分享的内容进行整理，以供大家查阅。首先，前端有很多名词
大家好，今天由我给大家带来 前端心理学茶哥 的分享总结。
茶哥是位声音酥酥的小姐姐:girl:，总结的知识点也是满满的干货，接下来我将对茶哥分享的内容进行整理，以供大家查阅。
首先，前端有很多名词
// 包管理工具 npm bower yarn // 构建 webpack Grunt Gulp require.js Brunch parcel Browserify Yeoman Brunch Broccoli // 模块定义规范 AMD CMD UMD CommonJS 复制代码
我们将这些名词分下类，前面几个包管理工具，中间部分是构建类的工具，后面的一部分是模块定义规范。
虽然很久以前前端可能就是单纯的写简单页面的，但现代开发实际变得更加复杂。比如游戏开发，时间等等插件都有不同库，因此我们需要包管理 工具 来管理这些库。
模块定义规范
如何对这些包进行相互间的管理，我们就需要用模块定义规范来进行约束。
在早期的时候我们使用 script 标签来引入js文件。
<script src="jquery.js"></script> 复制代码
但是这样会有很大的弊端：在大型项目中我们需要手动来管理引用文件、各个js文件的执行顺序和前后依赖混乱、命名空间可能会冲突等等。久而久之，这样会形成一个非常臃肿的难以维护的代码库。
现在主流的包安装工具 npm 和其他的包安装工具都有的各自的特点，比如说安装简单，易用易上手等等。
现在的模块规范有 commonjs 、 cmd 、 amd 、 umd 等 ，在 webpack 中主要是 commonjs ，但是也支持 amd ，还对一些不支持模块规范的很老的库支持 Polyfill 垫片。
我们先简单讲下最常见的模块定义规范。 首先我们讲下commonjs，commonjs中一个文件就是一个模块，他主要使用require来 同步加载 模块，最后呢，将要输出的变量或者方法添加单export上面
require('file_url') //引入
module.export=something //导出
复制代码
这种方式比较适用于服务器端，所有的模块已经保存在服务器端，因此加载起来比较快。
但是在浏览器中明显很不合适，考虑到会造成同步阻塞，因此有了 异步加载 模式 amd
// 基本语法
define(id,dependences,function(require,exports,module){})
// 创建一个名为"alpha"的模块，使用了require，exports，和名为"beta"的模块:
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
复制代码
Webpack
webpack是资源模块化管理打包工具， webpack 前身有 grunt 、 gulp ， webpack 有两者相同的功能，但是又和他们不同： webpack 是模块管理工具，后面两者更类似于任务管理器。
但实际项目中， webpack 最重要的是配置好配置文件。
安装webpack
我们接下来讲下webpack的安装
我们可以先安装nodejs，nodejs自带软件管理包npm，我们就可以用npm安装webpack(以下操作也可以使用 yarn 操作，大同小异)。
webpack分两种方式，全局安装和局部安装。
我们建议局部安装，这样webpack有升级也不会影响到我们本地的项目，有兴趣的也可以看看 npx 命令。
npm i weback -D 复制代码
在webpack升级到4的时候，我们必须安装 webpack-cli 否则无法启动webpack
运行webpack有几种方式，第一种是在终端通过命令：webpack + 文件路径+webpack参数来启动，这样比较繁琐。 另一种是通过webpack.config.js配置文件来启动项目。这个文件实际是一个nodejs模块，返回一个json的配置对象。webpack结合配置文件就可以了。
还有一种方式通过npm的package.json文件的scripts属性里面配置
"script":{"open": "webpack --progress --colors --watch"}
复制代码
然后运行 npm run open 即可。
基本项目
现在我们新建一个项目
// -y是执行默认行为 npm init -y 复制代码
项目结构
app/ entry.js sub.js index.html package.json webpack.config.js 复制代码
entry.js就是入口文件
var sub = require('./sub.js');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);
复制代码
sub.js
// 我们在这里使用commonjs的风格
function generatorText(){
var element=ducumnt.createElement('h2');
element.innerHTML='Hello h2';
return element
}
module.exports=generatorText
复制代码
index.html是html模板，为了展示执行js的效果，我们就简单引入html的模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
复制代码
webpack配置
接下来重点讲下webpack.config.js的内容。这个文件主要分为两个部分，第一部分是引入各个模块，第二个部分就是模块导出对象，这个是重点。
var webpack=require('wenpack');
module.exports={
mode:'development',
entry:'./entry.js',
output:{
path:__dirname,
filename:'bundle-[hash:8].js'
},
module:{},
plugins: [],
}
复制代码
第一个部分就是commonjs用require引入模块
这里有些是webpack自带的模块，还有一些是node里面的模块。比如path，就是为了避免多端的路径产生问题
其中第一个是entry属性，这是入口js文件 当代码启动的时候，首先执行的就是入口文件，其他的模块是等到遇到require方法才开始执行的。可以指定一个文件，也可以指定多个文件。
然后是output属性，这个是设置webpack将转换好的模块打包的位置。
里面有多个选项配置，path 路径，filename 文件名，这里可以使用hash属性来防止浏览器进行缓存。 还可以对多个公共模块进行提取，这个稍后讲。
第三个重点呢就是module ，就是node转换器，用于将其他文件类型，css jsx 图片。因为webpack只能处理js，因此要用转换器来对这些文件类型转换打包
配置的mode是webpack4新增的一条属性，它的意思为当前开发的环境,可以为 "development" 或者 "production"
插件1：html-webpack-plugin
除此之外，我们虽然设置了html模板，我们要引入 html-webpack-plugin 插件来进行配置才能使用。
安装
npm i html-webpack-plugin -D 复制代码
配置
// webpack.config.js中增加配置
···
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 在plugins数组添加
new HtmlWebpackPlugin({
title: "My App",
filename: "index.html",
template: "./app/index.html",
hash: true
}),
···
复制代码
插件2：clean-webpack-plugin
现在我们执行 npx webpack 就会在dist文件夹生成文件
dist/
bundle-8cecda3d.js
bundle-xxxxxxxx.js
bundle-xxxxxxxx.js
index.html
复制代码
生成每次带有hash的文件并不会自动清除，我们可以使用 clean-webpack-plugin 插件，来清楚多余的文件。 安装
npm i clean-webpack-plugin -D 复制代码
配置
// webpack.config.js中增加配置
···
// 清除dist文件的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//在plugins数组中添加
new CleanWebpackPlugin(),
···
复制代码
插件3：webpack-dev-server
webpack自带本地服务器，可以在devserver进行配置。当然我们也可以使用node服务器，或者apache配置。
现在讲一下devServer属性配置
npm install webpack-dev-server -d 复制代码
...
devServer:{
// 这个属性主要用于SPA，单页面开发时，如果设置为true，所有的跳转将指向index
historyApiFallback:true,
// 启用 webpack 的 模块热替换 功能
hot:true,
// 处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台
inline:true,
// 默认webpack以项目根目录为起始路径，如果你想指定目录可以在这里设置、
contentBase: path.join(__dirname, 'dist'),
// 将运行进度输出到控制台
progress:true，
// 设置监听端口，默认8080
port:3002，
// 自动打开浏览器
open:true
}
...
复制代码
先执行 npx webpack 再执行 npx webpack-dev-server ，这样，我们就可以在浏览器中看到我们的页面了。
此时，将以上命令联合，可以配置在package.json的scripts中，比如
"scripts": {
"dev": "npx webpack && npx webpack-dev-server"
}
复制代码
额外插件介绍
在实际开发目录中，我们可以使用双服务器模式，可以使用中间件 webpack-dev-middleware ，但是只能在生产环境使用。他可以在内存中实时打包，生成虚拟文件，供浏览器实时访问以及调试。
这里推荐一个插件，叫做打包面板 Webpack-dashboard ，使用效果如下图，看起来页面更加简洁。
结语
本来茶哥周四已经分享了的，但是我周末有团建，周天又去参加社区活动，这才延迟了总结时间，真心感到抱歉。
以上就是前端心理学茶哥的分享总结，感谢茶哥的分享:raised_hands:。让我们期待茶哥的下一次分享，大家一起学习进步。
以上所述就是小编给大家介绍的《心理学之茶哥分享：前端包管理工具整理》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 神经网络的叛离：32年前从心理学与生理学分离的瞬间
- 前端科普系列（三）：CommonJS 不是前端却革命了前端
- 前端科普系列（三）：CommonJS 不是前端却革命了前端
- 前端技术演进（三）：前端安全
- 【前端优化】前端常见性能优化
- 【前端学习笔记】前端安全详解
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
