webpack.jpg
写在前面
通过上篇文章的学习，我们已经对webpack有了一个初步的感观认识，大概对认为他是一个js的翻译器，其实，webpack只认识我们上节提到的import语法，对于一些其他的js高级语法，他一概不知，所以，如果你认为webpack是一个js翻译器，实际上是高估了它，借用官网的一句话
webpack is a module bundler.
这是webpack最真实的定位，也是我们今天要讨论的内容--webpack是一个模块打包工具
模块打包工具
有了上面的“纠正”，我们再来看上篇中的一段代码
import Header from './header.js'
import SiderBar from './siderBar.js'
import Content from './content.js'
new Header()
new SiderBar()
new Content()
实际上，上面代码中的'Header'、'SiderBar'、'Content'都叫做模块，是符合ES Moudule规范的模块。而我们的webpack是是能够把这些模块打包到一起生成一个最终的js的工具，所以，我们才叫webpack为模块打包工具，看到这里，我们揭开了webpack长久以来神秘的面纱，他其实没什么特别的。
实际上，我们在前端开发中，不仅仅会用到ES Moudule的模块化，可能还会用到如果CommonJs规范(Nodejs中常用)，实际上webpack对于ES Moudule, CommonJS, AMD.CMD这样的模块化规范都可以识别
我们对上节的代码修改为CommonJS规范，来验证
var Header = require('./header.js')
var SiderBar = require('./siderBar.js')
var Content = require('./content.js')
new Header()
new SiderBar()
new Content()
既然引入采用的是CommonJs规范，那么导出我们也要按照CommonJs规范来导出，如
function Content () {
var root = document.getElementById('root')
var content = document.createElement('div')
content.innerText = 'I am content'
root.append(content)
}
module.exports = Content
这样我们再运行一下编译，你会返现，代码依然是可以正常运行的。
实际上，我们在项目中，不仅仅是有js文件，我们还会用css文件，图片文件等可以进行模块化的导入导出，而webpack也可以将js文件以外的模块化文件做打包处理
通过上面的讲解，同学们现在应该清楚了webpack不是一个JS翻译工具，而是一个模块打包工具，他支持任何规范下的模块化打包
webpack环境搭建
在上篇的演示中，我们旨在带大家从感观上认识Webpack,只是演示性的带大家安装并运行了webpack,有一些细节我并没有详细解释，这里我将带大家详细解释。
首先，我们要清楚，webpack是基于NodeJS的模块打包工具，所以在学习webpack之前如果你有一定的NodeJs基础，那是极好的，不过没有也无所谓，跟我走就可以。
- 安装NodeJs，到官网下载即可，不再赘述，我们最好是安装最新的NodeJs，因为他会提高我们的Webpack打包速度。实际上，webpack打包会依赖NodeJS最新版本的特性，webpack版本和NodeJS版本越新，打包速度也会更快，并且对比很明显。
- 新建一个项目目录，我们重头开始搭建一个webpack环境,然后通过下面指令初始化一个npm环境
npm init -y
3.安装webpack
- 我们可以全局安装webpack
npm install webpack webpack-cli -g
这里不建议大家使用全局安装，因为我们的项目不一定都是安装同一个webpack大版本配置的，加入不是的话，这样就会出错，你还得去删掉全局的版本，进行私有的安装。
- 在项目内安装(推荐)
npm install webpack webpack-cli -D
当我们安装完成以后，尝试webpack -v指令，发现并不能运行，因为当你运行指令的时候，nodeJs会尝试在全局找webpack，这个时候如果你没有全局安装的话，就会报错了。我们可以通过在指令前加npx来运行项目中的依赖指令。
npx webpack -v
这是因为npx会去我们项目的node_moudules目录下去找相关依赖，这样就可保证不同项目之间的Webpack版本相互独立了
配置webpack
我们知道，我们是通过对webpack进行配置来发挥webpack的强大功能的，使其更加的灵活，功能更加的强大，下面我们就介绍webpack的配置。建议和我一起手写代码。
思考
我们先思考这样一个问题，在前面的例子中，我们使用webpack对js代码进行了打包运行，假如我们现在要引入一个图片，我们还需要将整个文件打包进我们的资源吗？实际上我们只需要将其路径打包进即可，同样的，我们在打包的时候，还会考虑，什么样的文件打包到什么地方，等等...虽然webpack团队为了让我们尽可能爽的使用webpack，一直在丰富着webpack的默认配置，但这对于一些功能来说，我们还是需要通过配置来实现。
配置
我们在我们的项目目录下新建名为webpack.config.js的文件，这是webpack读取的配置文件。
入口文件和出口文件
还记得我们上篇中让webpack编译一个项目会通过npx webpack index.js来运行，实际上这个操作是我们为webpack指定了一个开始执行的文件即入口文件，我们其实是可以通过配置来设置这个入口文件的，这样我们在运行的时候，就不用去在指令中写这样的文件了。
配置如下：
const path = require('path')
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
},
}
-
entry即为入口文件。指定webpack从哪个文件下开始运行 -
output即出口文件，其为一个对象，其中filename是出口文件的文件名，path为出口文件所处的目录，这里我们要使用绝对路径，所以需要引入NodeJS的path模块。__dirname为当前配置文件所处绝对目录。
这时候我们在运行一下，发现在我们的项目目录中生成了如下的目录
|--bundle
| |--bundle.js
说明我们的配置生效了。
对配置文件重命名
假设我们想给默认的配置文件换个名字，比如换成webpackconfig.js，这时候再运行代码，发现会报错。我们可以运行下面的指令，让其按照我们自定义名字的配置文件来运行
npx webpack --config webpackconfig.js
这里只是演示哈，大家可以演示过后把配置文件名改回来。
应用分层
到此为止，我们关于webapck最基础的配置就介绍完了，接下来我们对我们的项目目录做一个优化，让其来适应接下来的高级配置。因为现在我们的项目(上一篇中做练习的那个项目)整体结构还是比较扁平的，不利于应用分层。
应用结构如下图
捕获.PNG
目录换了，我们的配置文件中的入口文件对应的也好换一下，同时我们把出口文件夹也改成我们更加常用的'dist'
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
}
这时候打包试一下吧！
这时候，距离我们通常在项目中使用的类似于npm start,npm run dev,npm run serve的指令对项目打包还不太一样，接下来，我们将通过npm script 来简化我们的打包配置
简化配置(npm Script)
这时候我们的package.json文件就派上用场了，我们在其script项中做如下配置
"scripts": {
"bundle": "webpack"
},
这样在命令行运行npm run bundle就可以想运行npx webpack那样了。这样我们就可以自由配置我们指令了。
补充
我们在执行Webpack打包的时候，会发现在终端输出了好多信息，下面我们就一一讲解一下这些信息是干嘛的，以我们现在的demo项目为例，我们在执行完打包命令后，终端输出是这样的
1.PNG
-
Hash代表本次打包对应的唯一的hash值 -
version代表我们本次打包使用的webpack版本 -
Time代表本地打包耗时 -
Asset代表我们本次打包出来的静态文件名 -
Size代表本文件的大小 -
chunks代表每个打包文件的id值，一般对于复杂应用，我们会打包出多个js文件，这时候chunks字段就显得很重要了，它里面会有打包出的文件各个相互依赖文件的id,后续我们会看到。 -
chunk Names和chunks类似，代表对应的打包输出文件的名字。那么name是哪来的呢？实际上我们在写配置文件时
entry: './src/index.js',
实际上时对下面代码的简写。其中'main'就是我们的chunks Name了
entry: {
main: './src/index.js',
}
-
Entrypoint代表我们的打包项目中的入口文件是哪一个
我们还会发现在打包完成后，命令行有一些警告，因为我们的webpack的默认打包模式是'production'，这时候我们把这个项写上，再打包，发现警告就不会存在了。这时候加入我们将配置项变成“development”，这时候就会发现，我们打包出来的文件不再是压缩为一行了
写在后面
本节为大家介绍了从wbepack的本质，以及正确的安装方式，以及带大家亲自体验了webpack简单配置和打包过程，在后面的文章中，我们将带大家感受更强大的Webpack功能。关注我，不迷路...
网友评论