写在前面
距离Webpack4发布已经有一段时间了，喜欢尝新的小伙伴应该已经用上它了。在使用的过程中，或多或少都会踩到一些坑，以下作为一个入坑webpack的使用笔记，对使用webpack4的同学多少有些帮助。
什么是webpack？什么使用webpack？
一项技术的产生，必定有其特殊的原因。一项技术的流行，毕竟是因为有它的市场。
我们打开webpack官方网站。首先看到的是一幅图
image.png
以及它动态滚动的条幅
- bundle your assets
- bundle your script
- bundle your images
- bundle your styles
引用官网的一句话：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
而模块究竟是什么呢？webpack解释，中文版不再复制了。
我这里用一句通俗的话来解释模块，模块就是文件。一个文件就是一个模块，无论什么样子的文件，在webpack看来都是模块，所谓的模块打包器就是文件打包器。
为什么使用webpack呢？最初的原因可能是为了将各个小的js文件打包成一个js文件，以提高网络利用率。但随着技术的发展，开发者对自动化构建提出了更高的需求，比如要转码了，要兼容不同的模块类型（ES Module，node modules,amd modules等），这些需求促进了webpack整个生态的发展。webpack基本已经成为了现代化js项目的首选构建工具。
hello webpack
我们在学习一门新的编程语言的时候，通常是从hello word开始的。我们就从一个简单demo开始。
现在我有一个工具类库，为了方便开发，分散在多个文件之中。使用ES Module编写
他们分别是
projectRoot
|--src
|--modules
|--body.js
|--toUper.js
|--index.js
// src/modules/body.js
export default function () {
document.title = 'hello webpack '
document.body.innerHTML = '<div>good good study ,day day up!</div>'
}
// src/modules/toUpper.js
export default function (str) {
return str.toUpperCase()
}
然后使用一个统一的 src/index.js文件引入它们
import writeBody from './modules/body'
import toUpper from './modules/toUpper'
export {
writeBody,
toUpper
}
现在我们要使用webpack将它们打包成一个文件。
为了实现打包功能，我们需要
安装webpack
我们可以通过npm安装webpack（如不熟悉，需补充npm相关知识）
使用命令
npm i -g webpack webpack-cli
即可将webpack工具安装到本机
初试打包
打开终端命令提示符，将我们将的工作目录转到projectRoot下，执行webpack
projectRoot> webpack
稍等片刻，即可在projectRoot下看到一个dist目录。下面就有我们打包的main.js。
但这个js文件还不能简单的被浏览器正确的使用。我们还需要进行一些简单的配置。
在projectRoot下建立一个webpack.config.js并输入如下内容
module.exports = {
output: {
library: 'tool',
libraryTarget: 'umd'
}
}
再执行webpack命令，会重新生成一个main.js，这是一个标准的umd模块，可以被浏览器正确的加载了。
测试生成的文件
我们在projectRoot下建立一个index.html文件，引入打包好的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/main.js"></script>
<script>
// umd模块在直接引用的时候，会将模块对象绑定到window上
// 调用模块中的方法
tool.writeBody()
</script>
</body>
</html>
即可看到相应方法的执行效果。
本文只是一个webpack的入门hello world,后面会陆续介绍在项目中运用webpack需要了解的更多技能。
点击下方链接，关注一波
https://www.jianshu.com/c/c04ed79b97e9
留下你的关注。给个小心心再走如何？
网友评论