从来没有系统需学习过webpack，都是用到什么loader,什么插件就直接搜索，很多原理没有仔细研究过，以至于现在稍微有点复杂的配置都无从下手；所以打算仔细系统的学习一下，这里也算是我的笔记了，嘻嘻嘿嘿哈哈。。。
一、webpack 学习线路图
二、为什么会出现webpack
面向过程：随着前端工程越来越复杂，单独建立几个文件写项目代码，已经无法保证项目的可维护性了（面向过程导致代码越来越多无法维护）；
var dom = document.getElementById('root')
var header = document.createElement('div')
header.innerHTML = 'header'
dom.append(header)
var content = document.createElement('div')
content.innerHTML = 'content'
dom.append(content)
var footer = document.createElement('div')
footer.innerHTML = 'footer'
dom.append(footer)
面向对象： 所以我们想把不同的业务逻辑拆分成模块，然后分别引入这些模块，模块自己做自己的事情，这样就可以保证项目的可维护性和可扩展性了。
// index.html
<body>
<p>这是我们的网页内容</p>
<div id="root"></div>
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./footer.js"></script>
<script src="./index.js"></script>
</body>
// header.js
function Header() {
var content = document.createElement('div')
content.innerHTML = 'content'
dom.append(content)
}
// index.js
var dom = document.getElementById('root')
new Header()
new Content()
new Footer()
如上代码图：假如项目有几千个模块，那么我们能在页面上引入几千个js文件吗？显然是不能的，对于模块在主应用入口index.js的放置顺序，还有页面加载都有一定的限制；于是有人就想是不是可以通过引入模块的方式展示，如图：
这样的方式不受js引用限制，但是浏览器根本不认识import，index.js:7 Uncaught SyntaxError: Cannot use import statement outside a module；所以引入webpack这样的工具，来翻译浏览器不认识的语法；因此当项目大到这种程度的时候我们就得依靠工具管理这些模块了。
webpack 就是这样的工具，帮助我们管理复杂项目的一种工具，与其相似的工具还有 gulp、grunt、browserify；但是这几年webpack的使用率直线上升，比如Vue、React、Angular三大框架的脚手架工具都开始使用webpack做底层代码的构建，这得益于webpack可以实现其他工具无法实现的一些特性，比如：Tree sharking 、懒加载、代码分割等。
所以现在我们来用webpack做代码管理工具已经是越来越多前端开发者之间的共识了。如果不会webpack你可能会觉得我写业务代码也没有任何问题呀，但是如果你学会了webpack你就会从更深层次的思考前端工程化上面的内容，也能发现在代码的背后其实别有洞天，学习 webpack将极大的扩充前端开发视野。
二、webpack 安装
webpack是基于node的模块打包工具，因此它依赖于node，安装前必须要安装node；优化webpack打包速度最重要的一条就是安装新的稳定版本的node和webpack，因为webpack会依赖于node的一些新特性来优化自己；
- 初始化项目 npm init
- 在项目里npm install webpack webpack-cli --save-dev ，
- webpack-cli的作用：使得我们在命令行里面可以使用webpack 或者 npx webpack 这个命令，
- 安装完cli 之后一般webpack也会自动安装；
- 最好不要全局安装webpack（本地可能存在多个项目）, 要在项目里安装。
- npx webpack index.js (使用webpack翻译index.js文件，此时查看项目下生成了什么，可能会报错，因为import引入需要用ES Module导出才可以)；
注意： 我们发现在项目中运行webpack -v会提示找不到，原因是webpack安装在项目内不是全局安装，此时程序会从全局环境查找因此提示找不到。这个时候我们用node 提供的一个命令npx, npx命令会去项目中的node_modules中去找对应的包。
在这里大家可能认为webpack 是一个js翻译器,其实不然。webpack定义是一个模块打包工具(bundle)，打包成一个个的chunk；
- ES Module 模块
- CommonJS 模块规范
- CMD
- AMD
三、webpack 配置
在webpack中我们需要告知它哪一个是入口文件，打包出的文件放到哪里，所以它需要一个配置文件来告诉它怎么操作打包； 但是上一节简单使用的时候我们并没有做任何配置，只是告诉npx webpack index.js 入口文件，其实输出dist/main.js是webpack执行的默认配置输出文件；
随着工程复杂程度增加，简单默认配置满足不了需求，因此我们可以定制配置webpack文件:
- 创建webpack.config.js
- 编写配置文件
const path = require ('path')
module.exports = {
mode: 'development' //（development打包的不是压缩的代码）/(production打包的是压缩的代码)
entry: 'index.js',
output: {
filename: 'bundle.js', // 放到bundle文件下的 bundle.js
path: path.resolve(__dirname, 'bundle') // 生成bundle文件夹的绝对路径（一般都叫dist）
// path也可以不写，不写会执行默认的配置，在绝对路径下生成dist文件
}
}
这里需要⚠️注意一下：path 需要绝对路径。path.resolve(dirname,‘bundle’)就是在当前webpack.config.js的目录下生成bundle文件夹；dirname就是webpack.config.js的绝对路径；
- 最后运行 npx webpack；（如果配置文件命名成不是webpack.config.js。也可以直接运行npx webpack --config webpack.js）
- 为了简化命令，我们配置npm scripts；
在packjson.json中配置之后，在命令行npm run bundle就会执行webpack命令；在script 中配置好的命令，会优先查找工程中的包，找不到再去全局查找，因此不需要npx了。
四、webpack 执行方式
首先先介绍一下webpack-cli这个包有什么作用：它的作用的就是让我们可以在命令行中运行webpack命令；
- webpack index.js
- npx webpack index.js
- npx webpack --config webpack.js (根据文件名npx webpack)
- npm run bundle
mode: development（打包的不是压缩的代码），production(打包的是压缩的代码)
Chunks: 里面存放bundle.js 自己的ID值，也有与它关联的js的ID值，都放到chunks里面。
Chunk Names: 与Chunks一样，只不过它里面存放的是每一个js对应的 name；那这里的 main 是哪里的？
module.exports = {
// entry: 'index.js' 缩写
entry: {
main: 'index.js'
}
}
1209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
