标签：tab 情况 split 生成 ima 入门 const 而不是 loader
（在过去）对我这种渣渣来说，在项目里面一旦配置好了webpack之后，就再也不想碰这玩意儿了，因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍，还得不断地跑起来看是不是生效了，有时候突然生效了也不知道原因是啥-.-反正下次再配的时候又会不记得。。
笔者对webpack是又爱又恨啊（应该很多读者也有一样的想法吧hhhh）又不得不去使用它，所以在前端的学习路上一路与webpack斗智斗勇，因而有了这篇wbpack的学习笔记，以下是笔者在实践中还有参考了无数优秀的webpack相关文章写下的笔记，假如有不当之处请及时指出～谢谢????
webpack可以说是一个模块打包器，让你可以放心地写你的前端项目，放心地使用社区上最流行的库，模块，插件，框架等等。不用担心，webapck都会根据你的项目帮助你将其打包好，打包好的文件可以直接提供给浏览器使用噢。
我们要告诉webpack它应该从哪里开始构建我们的项目，所以我们要指定一个或多个js文件作为入口文件（parcel是可以以html和js作为入口文件），然后webpack就会从入口文件开始构建其内部依赖，形成一个依赖图。
webpack构建好后会生成称为bundles的文件中，所以我们需要告诉webpack出口文件放在哪个位置，如何命名等规则。
因为webpack本身只认识JavaScript文件，loader可以帮我们把其他类型的文件转化为它能处理的模块，包括图片，字体，css，ES6，ts，vue模版等。不同的文件会有不同的loader去转化。当然你可以在每个loader按照粒度去配置你的逻辑，但是要注意书写顺序等小问题噢（也就是说会有很多各种各样的小坑等着你）
都说插件是webpack的支柱功能，它负责完成loader无法完成的其他事项。我们可以在插件里引入webpack自带的一些优化插件，例如CommonsChunkPlugin，DllPlugin等，还有一些需要我们自己install的插件（也属于webpack生态圈中的），例如ExtractTextWebpackPlugin，HtmlWebpackPlugin等（更多可以看看官网的介绍https://webpack.docschina.org/plugins ），还有就是一些webpack社区中一些优秀的插件例如happyPack，ImageminPlugin等。。。可能对一些刚刚入门的同学来说有点看不懂，不过没所谓，慢慢来，你以后都会用上的～
以下是一个简单的栗子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const path = require(‘path‘);const webpack = require(‘webpack‘);const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);module.exports = { entry: { index: path.join(__dirname, ‘main.js‘), }, output: { path: path.join(__dirname, ‘/dist‘), filename: ‘js/bundle.js‘ }, module: { rules: [ { test: /\.css$/, use: ‘css-loader‘ }, { test: /\.ts$/, use: ‘ts-loader‘ } ] }, plugins: [ new HtmlWebpackPlugin({ filename: ‘index.html‘, template: ‘index.html‘, }) ]}; |
大概意思就是自动剔除一些我们程序中不会用上的多余代码，而webpack可以结合一些能够删除未引用代码的插件（例如uglifyJS），帮助我们完成这个事情。例如你import了一个js文件但是只用了里面的其中一个函数，webpack打包的时候就会只打包那个函数的代码而不是整个js文件。
webpack能够按需对代码进行分离，还能动态的并行的去加载这些文件，（合理应用的情况下）这能让我们大大提高加载效率。我们可以通过入口起点的直接分离，动态引入模块，提取公共模块等方式进行代码分离～
我们在开发的时候，出现bug时当然是不想看着打包后的代码来调试的（而且不一定看得懂），我们希望的是我们能在本地起一个服务，直接调试自己的源代码，明确追踪到每一行代码，而且能做到改完代码保存后能马上看到效果，而不是要刷新整个页面或者整个项目跑一遍，而webpack可以帮我们做到这一点。
要完全理解webpack整个构建过程是有难度的，这需要你去学习webpack的源码，这里简单地说一下webpack的执行过程:
webpack先识别我们写的配置表选项，进行一系列的初始化
webpack从入口文件开始进行编译，递归解析对应依赖的文件，需要进行预处理的文件会根据配置的loader去转换
根据不同块之间的依赖进行分组，分成不同的chunk
将不同的chunk转成对应的输出文件
plugin会贯穿这个编译的过程，会在适当的时机调用适当的插件
对于详细地结合源码分析，日后会继续和大家学习与分享～
标签：tab 情况 split 生成 ima 入门 const 而不是 loader
原文地址：https://www.cnblogs.com/it-hao/p/11719577.html
