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

首先申明，本篇文章对于高手来说，毫无意义。对于新手来说，省学费了。

如果对你有用，点赞，关注，欢迎指出错误之处。谢谢。

先读懂我这篇 webpack 入门 https://blog.csdn.net/weixin_41229588/article/details/107788830

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

https://gitee.com/jianghaijun/webpack-demo

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

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

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

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

然后就是这个页面，

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

1. 指南必看

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

2. Plugins

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

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

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

有结果

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

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

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里有没有这东西。