webpack入门学习笔记11 —— 在项目中对打包编译的文件进行分类

1. 写在前面

在前面的博客中，咱们对Webpack项目进行了不少配置，也屡次打包编译了项目。若是你细心观察的话，你会看到，项打包编译后的目代码,所有都放在了 build 文件夹下，没有根据文件格式的不一样再次进行分类。

可是咱们所指望的场景是：项目打包编译以后，对文件进行分类，不一样的文件放在不一样的文件夹下。好比打包编译后，图片所有都放在 build/images 文件夹下，样式文件所有放在 build/css 文件夹下，这样便于管理项目。以下图所示：

那么须要如何配置，才能达到这个目的呢？在这篇博客中，我会跟你们分享。

本片博客的主要内容有：

• 将图片文件进行分类
• 将CSS样式文件进行分类

2. 将图片文件进行分类

想要对图片进行分类，咱们须要使用 url-loader 来处理图片文件。第一步仍是安装该loader，安装命令以下：

yarn add url-loader -D
复制代码

安装完成以后，到 webpack.config.js 中进行配置，配置规则很是简单，这里直接给出代码：

module.exports = {
    /* 节省篇幅，其他配置已省略 */
    module: {
        rules: [ {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 2 * 1024,    // 小于2k的图片，直接使用Base64编码进行处理
                        outputPath: '/image/'
                    }
                }
            }
        ]
    }
}
复制代码

这里将其余的配置规则省略了，若是你想看其余的配置规则，能够查看个人 GitHub仓库 - webpack-learning ,或者经过本文末尾的连接，跳转到我以前的博客中进行查看。

下面对上述配置进行简单解释：

• 使用url-loader处理图片资源的时候，须要指定 limit 属性，当图片小于该属性大小的时候，直接使用Base64编码处理图片，不会再项目中生成图片文件。
• 当图片大于该属性大小的时候，不使用Base64编码处理图片，而是将该图片放到 build 文件夹下，若是指定了 outputPath 属性，那么图片会放到该属性指定的目录下。

3. 将CSS样式文件进行分类

对打包编译后的CSS文件进行分类，须要借助一个插件，即：mini-css-extract-plugin 。使用以前须要使用如下命令进行安装：

yarn add mini-css-extract-plugin -D
复制代码

安装完成以后，进行如下配置：

let MiniCssExtract = require('mini-css-extract-plugin')     // 引入插件
/* 节省篇幅，其他配置已省略 */
module.exports = {
    plugins: [
        new MiniCssExtract({
            filename: 'css/main.css'    // 配置CSS输出位置
        }),
    ]
}
复制代码

配置完成以后，进行打包编译项目，就会看到编译后的CSS文件在 build/css 文件夹之下了。

4. 写在最后

以上即是本篇博客的全部内容，但愿对一些初次接触Webpack的前端小白有所帮助。

文章中若有错误以后，还但愿各位大佬予以纠正。

上一篇: webpack入门学习笔记10 —— 在项目中使用图片资源

下一篇: webpack入门学习笔记12 —— 打包编译后文件的引入路径问题