1. webpack究竟是什么？
在了解webpack是什么之前，我们首先需要明白没有webpack的时候，一个前端项目出现了什么难题需要解决。
Ⅰ. 为什么需要webpack？
要理解webpack是什么，解决了什么问题，我们需要明白的是，浏览器在解析js的时候，它有一个盲点就是，没有做到js的模块化。比如一个文件要想给另外一个文件暴露出去一部分数据或者一个变量，那只能将它定义在全局的作用域下，没有其他的办法。
比如b依赖于c，a依赖于b：
//index.html
<body>
<script src="c.js"></script>
<script src="b.js"></script>
<script src="a.js"></script>
</body>
//c.js
function C(str){
window.alert(str)
}
//b.js
function B(str){
C(str)
}
//a.js
function A(str){
B(str)
}
A('msg')
这种依赖关系随着项目越来越大、越来越复杂，也会变得复杂，而且依赖链会越来越长。但是最坑的地方每一个依赖里头必须暴露出来一个全局变量。这个就特别难受。
并且，当某一个js文件出现错误时，这个错误往往难以排查。
如何来规避这个问题呢？
我们可以将js模块化：
//c.js
function C(str){
window.alert(str)
}
export default C
//b.js
import C from './c'
function B(str){
C(str)
}
export default B
//a.js
import B from './b'
function A(str){
B(str)
}
A('msg')
//index.html
<body>
<script src="a.js"></script>
</body>
现在我们查看index界面，实现了我们想要的效果吗？
当然不行，为什么？
这里我们使用了ES Module模块语法，而浏览器是不认识这种语法的，我们需要将a.js文件再“ 翻译 ” 成浏览器可以理解的格式，而这时候，我们就需要一个打包工具来帮助我们完成这一过程。
而webpack就是当前最流行的打包工具，它是一种模块化的解决方案，在webpack 看来，不只是js，包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
Ⅱ. webpack 究竟是什么？
结合了上面Ⅰ的说明，我们可以更加清楚的知道，webpack就是一个打包工具，它能将浏览器不能识别的语法“ 翻译”成浏览器能够理解的格式。
更加官方的说明：
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
2. webpack的正确安装方式
webpack是在node.js的环境中运行的，所以我们需要在本机上安装node,并安装npm便于我们后期对node插件的添加与管理。
Ⅰ. 全局安装
npm install webpack webpack-cli -g --save-dev
Ⅱ. 局部安装
首先创建一个项目目录
在项目目录下：
npm init
npm install webpack webpack-cli --save-dev
当我们使用局部安装时，不能直接在命令行中使用webpack命令：
'webpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
这时候我们可以在webpack命令之前使用npx指令，告诉node我们使用的是当前目录下安装的webpack。
比如我们需要打包之前的a.js：
~/> npx webpack a.js
Ⅲ. 局部安装和全局安装的利与弊
全局安装：可以在任一项目中使用。
局部安装：当不同项目使用的webpack版本不同时，全局安装的webpack不能同时打包所有的项目。
这里我们推荐使用局部安装webpack
3. webpack的配置文件
在使用webpack进行打包时，我们需要设置其配置文件，虽然webpack团队为方便webpack的使用，设置了默认配置，所以即使我们不对其进行配置设置，以下命令依旧可以执行成功：
~/> npx webpack a.js
但是这并不总能达到我们的需求。
//webpack.config.js
//CommonJs的写法
const path = require('path')
module.exports = {
// entry: './src/js/a.js', //这是entry的简写形式，含义是webpack的入口文件
entry: {
main: './src/js/a.js'
},
output: { //输出配置
filename: 'a.bundle.js',
path: path.resolve(__dirname,'dist')
},
// mode:'production'//模式设置，在production模式下，webpack会将a.bundle.js进行压缩
mode: 'development'//不压缩
}
以上是最简单的webpack配置文件，包括了webpack打包的入口文件，输出设置和模式设置。此时，webpack也仅仅能够打包js类型的文件，当随着项目越来越复杂，webpack打包的文件还会包含其他类型的文件，届时的配置文件也将更加复杂，关于webpack配置文件的详细信息，可以查看webpack官网上的相关介绍。
考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：
"scripts": {
"注释": "这里的webpack指令会由内而外的查找执行，相当于npx webpack",
"bundle": "webpack"
}
此时我们就可以通过以下命令来打包a.js：
npm run bundle
既然webpack就是我们的打包工具，那我们安装的webpack-cli又是什么呢？
webpack-cli是帮助我们在命令行中使用webpack的工具。
4. 问题：
Ⅰ. webpack是什么？
Ⅱ. 模块是什么？
Ⅲ. webpack的配置文件作用是什么？
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
