一文教你自学Webpack文档不再求人

傷城~ 2022-11-25 05:23 91阅读 0赞

> 首先申明，本篇文章对于高手来说，毫无意义。对于新手来说，省学费了。
> 
> 如果对你有用，点赞，关注，欢迎指出错误之处。谢谢。

先读懂我这篇 webpack 入门  [https://blog.csdn.net/weixin\_41229588/article/details/107788830][https_blog.csdn.net_weixin_41229588_article_details_107788830]

我在学习webpack时候的配置注释（参考着来就可以一往无前）

[https://gitee.com/jianghaijun/webpack-demo][https_gitee.com_jianghaijun_webpack-demo]

其实知道了webpack的知识点，那其实webpack解决就是打包问题。我遇到css怎么打包，遇到图片怎么打包，遇到了其他文件如何处理，打包前我干点什么，打包后我要注入到页面点东西怎么办。

配置项特别的多，是不可能全部都知道的。但是，如果学会如何查文档，那就非常美好了

就好比天下中国汉字你不可能认全，但是你只要会查字典，这个知识你就get到手里了。

官网地址： [https://www.webpackjs.com/][https_www.webpackjs.com]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

然后就是这个页面，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

你现在需要搞懂什么叫入口，什么叫出口，啥是loder啥是plugins 啥是mode ，上一篇文章有些，主要先了解下概念。

### 1.  指南必看 ###

建议新手看着这个跟着一步一步做下去，你的收获那是大大的。学完你就打开新世界大门了。基本涵盖了所以你要知道的webpack知识点，啥叫treeshaking 啥是代码分割。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2][]

### 2.  Plugins ###

我想要在打包之前把原来的打包的文件夹里的删掉，否则该影响我们的东西了。

从plugins的概念上我们就知道应该需要一个插件做这个事情。也就是在打包前干这个事情

那我百度一下webpack 清除文件夹插件

有结果

![20200807160935509.png][]

进入npm 网站 输入 clean-webpack-plugin

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3][]

不错，可以用，看看文档。还挺简单的。就是在你打包之前帮你把要打包进的文件夹干掉。默认就是你的出口。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
     
    const webpackConfig = {
        plugins: [
            /**
             * All files inside webpack's output.path directory will be removed once, but the
             * directory itself will not be. If using webpack 4+'s default configuration,
             * everything under <PROJECT_DIR>/dist/ will be removed.
             * Use cleanOnceBeforeBuildPatterns to override this behavior.
             *
             * During rebuilds, all webpack assets that are not used anymore
             * will be removed automatically.
             *
             * See `Options and Defaults` for information
             */
            new CleanWebpackPlugin(),
        ],
    };
     
    module.exports = webpackConfig;

其实第一件事想到百度是不对的，要先去webpack官网推荐的Plugins里有没有这东西。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4][]

官方推荐里没有再考虑去百度。这样才合情合理。

所以说插件是帮我们解决问题的，需要去查，不需要不用会。。

### 3.  loader ###

webpack 自己只认识js文件，你让我认识.vue，.css 无能为力啊，这个时候就要是用loader了。告诉webpack用我这个东西，我能解析这个文件，解析成你能看懂的再还给你。

加载css 我不知道用什么loader.去官网看看。他有没有现成的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 5][]

点开看看

果然是。

那我又想要用scss文件

这个就找sass-loader 不会用，直接文档走起。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 6][]

loader的执行顺序是从下到上，从右到左，实际就是从后往前。

推荐的loader那是不计其数，这辈子是看不完了。知道怎么查文档才是正解。

### 4.  配置 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 7][]

这一页包括出口入口配置的各种优化项，开发devserver，性能优化。统计信息。构建过程监控等这些的精准配置。

### 6.  api这一项 ###

这个比如你想自己写个插件，自己写个loader,或者说我不想用命令行操作了。比如你正在写一个node后台代码，需要用到这个打包的工具做些事情，你可以在打码里取实现这些接口。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 8][]

写在最后，webpack配置是一门学问，所以不能急于求成。想要进阶，就找一下想react-cli  vue-cli这些生成之后的源码去看看，他们都是基于webpack.看了源码。遇到不懂就来查文档，很快你就都明白了。

对于vue-cli 是一个对于webpack的二次封装。要增加需要查vue的文档了，就不要再查webpack的了。

本文主要是让你看懂官网。自主学习。

谢谢

[https_blog.csdn.net_weixin_41229588_article_details_107788830]: https://blog.csdn.net/weixin_41229588/article/details/107788830
[https_gitee.com_jianghaijun_webpack-demo]: https://gitee.com/jianghaijun/webpack-demo
[https_www.webpackjs.com]: https://www.webpackjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: /images/20221124/d308c95fde4649cbb468b78c56ec6604.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: /images/20221124/b165f1fea9f14498899fd1015142cbbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2]: /images/20221124/ce30a2b2cdf04c45b853f1b1ca122414.png
[20200807160935509.png]: /images/20221124/0f311b53f1a749d8b58186c67c7c750e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3]: /images/20221124/138e5dcae89a4ae5b0641a8039cea257.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 4]: /images/20221124/eec3ea3006a7456bad5014db5fc0e887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 5]: /images/20221124/f2da3d1cf3334765aa74f03d824a5752.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 6]: /images/20221124/98b9220dffe74ea798e45b23c5f55afc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 7]: /images/20221124/faf8657cae26481095751ab702617241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 8]: /images/20221124/79dab2a208764785a2a69440255b1c7c.png