webpack入门学习笔记11 —— 在项目中对打包编译的文件进
2019-07-28 本文已影响0人
振礼硕晨
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的前端小白有所帮助。
文章中如有错误之后，还希望各位大佬予以纠正。
