30分钟入门webpack4 五（单独提取css与图片处理）--粉丝服务平台-粉丝头条-fensifuwu.com

30分钟入门webpack4 五（单独提取css与图片处理）

科技 07-06 来源：前端行者

前篇文章我们讲解了webpack中的loader，并且使用less、less-loader、css-loader、style-loader，将一个在js中import的less文件通过webpack将样式打包到了页面中，但是我们发现，页面中样式确实是有了，但是页面的样式是通过style标签的形式写入到了页面中，在实际开发中我们其实更倾向于使用link标签导入样式，这时候应该怎么做呢？

一、使用mini-css-extract-plugin插件

这个插件能将CSS提取为独立的文件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap。

首先安装插件

cnpm install mini-css-extract-plugin --save-dev

安装完插件后其实就是设置了，下面是简单的设置信息：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
 mode:"development",
 entry:{
 "common":"./src/js/common.js",
 "index":"./src/js/index.js",
 "login":"./src/js/login.js"
 },
 output:{
 filename:"js/[name].js",
 },
 plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 template:'./src/index.html',
 filename:'index.html',
 chunks:["common","index"],
 hash:true
 }),
 new HtmlWebpackPlugin({
 template:'./src/login.html',
 filename:'login.html',
 chunks:["common","login"],
 hash:true
 }),
 new MiniCssExtractPlugin({
 filename:'css/[name].css',
 chunkFilename:'[id].css'
 })
 ],
 module:{
 rules:[
 // {
 // test:/\.less$/,
 // use:[
 // {loader:"style-loader"},
 // {loader:"css-loader"},
 // {loader:"less-loader"}
 // ]
 // }
 {
 test:/\.less$/,
 use:[
 {
 loader:MiniCssExtractPlugin.loader
 },
 "css-loader",
 "less-loader"
 ]
 },
 ]
 }
}

在webpack.config.js中我们首先定义插件，然后在plugins项中实例化插件（前面讲到了插件需要安装、定义、实例化三步），最后在module中定义处理less的规则，注释掉的部分是讲解loader的时候使用的，没删掉是要做个比较。

plugins项中mini-css-extract-plugin的实例化参数filename其实和output，html-webpack-plugin中定义的filename，完全一样，就是给输出文件起名字（有人可能会说不是在output中定义了吗，其实webpack入口与输出只是js，其他的是靠插件或者loader来处理，所用不要弄混）。

chunkFilename和html-webpack-plugin中的chunk类似，但是后面的[id].css不好理解（实在明白就这样写就行，固化的不会变），其实这个地方没法写实际具体的名字的，因为这是下面的loader中mini-css-extract-plugin插件内部自己产生的。

再来看rules中的定义，我们去掉了style-loader，因为我们不是要把样式写的页面中，我们是希望link单独的css文件。规则的意思就是遇到js中导入的以.less为结尾的文件使用less-loader来处理，然后转换成css，然后让css-loader处理样式内部的一些关于url，或者@import等一些css的问题，然后交给下一个loader，这个时候的loader变成了mini-css-extract-plugin中的loader了，这个laoder就是将css单独提取出来放入页面中，如下图：

二、处理图片资源

页面中有三种图片的引用方式，一种是html页面中的 img标签，一种是样式中类似background:url()，一种是是脚本中创建图片并插入页面的。那么我们就将这三种方式都尝试一下。项目目录如下图：

增加了三个图片，其实就是一个图片就是名字不一样而已。然后分别修改less文件，js文件，html文件，各个文件内容如下：

index.less

index.js

index.html

图片资源的处理有很多loader可以用，这里我们使用url-loader，对于页面中的img标签，我们使用html-withimg-loader。

安装loader：

cnpm install url-loader html-withimg-loader --save-dev

然后配置webpack.config.js：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
 mode:"development",
 entry:{
 "common":"./src/js/common.js",
 "index":"./src/js/index.js",
 "login":"./src/js/login.js"
 },
 output:{
 filename:"js/[name].js",
 },
 plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 template:'./src/index.html',
 filename:'index.html',
 chunks:["common","index"],
 hash:true
 }),
 new HtmlWebpackPlugin({
 template:'./src/login.html',
 filename:'login.html',
 chunks:["common","login"],
 hash:true
 }),
 new MiniCssExtractPlugin({
 filename:'css/[name].css',
 chunkFilename:'[id].css'
 })
 ],
 module:{
 rules:[
 {
 test:/\.less$/,
 use:[
 {
 loader:MiniCssExtractPlugin.loader,
 options:{
 publicPath:"../"
 }
 },
 "css-loader",
 "less-loader"
 ]
 },
 {
 test:/\.(png|svg|jpg|gif)$/,
 use:[
 {
 loader:'url-loader',
 options:{
 limit:10240,
 name:"imgs/[name].[ext]",
 }
 }
 ]
 },
 {
 test:/\.(htm|html)$/,
 use:["html-withimg-loader"]
 }
 ]
 }
}