篇文章我们讲解了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文件，各个文件内容如下：

图片资源的处理有很多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"]
 }
 ]
 }
}

这里需要注意几点：

第一、minicssextractplugin中添加了一个配置publicPath，为什么不把它放到output中？因为output中的pubicPath会影响所有路径。这里面我们只是想让css-loader处理完css后只解决样式表里的路径问题。

第二、url-loader，limit参数，当图片文件小于10K的时候，将文件转换成dataUrl格式的图片减少链接请求，name参数就是生成的文件名称，当然前面的imgs是dist目录下的imgs文件夹。

第三、遇到html或者htm结尾的文件时使用html-withimg-loader处理里面的图片资源。

前端的模块化开发不建议在页面中直接使用图片链接，要在js中导入图片，但我感觉不太现实，毕竟img标签不是摆设。

接下来运行 npx webpack命令，效果如下：

我们的图片是50多K大小所以dist目录下生成了imgs文件夹，并且将src中的图片考了过来。

如果我们将limit的值改为102400后，图片将直接转换成dataurl格式，不在保存到dist目录下，入下图：

我们可以发现他们的链接地址是有区别的。

三、总结

我们分了五节内容简单的描述了webpack4最基本的一些知识点，主要包括：

1、安装

前提条件安装node

在项目中使用npm init -y，初始化项目，主要是创建了一个package.json的文件，用来记录项目信息以及依赖关系。

为了避免插件或者loader下载不了，介绍了cnpm。

2、入口与输出

webpack.config.jswebpack的配置文件

npx webpack运行webpack的命令

最基本的入口与输出的概念

3、插件

clear-webpack-plugin 清除dist目录的插件

html-webpack-plugin 简化html创建的一个插件，并且关联js

mini-css-extract-plugin 单独提起css为文件的插件

4、加载器（loader）

model模式（开发模式，产品模式）

less-loader、css-loader、style-loader、url-loader、html-withimg-loader

这些知识点只是让初学者快速的跑起来一个webpack，避免踩坑，在实际的项目中遇到问题时可以知道具体知道从哪方面入手来解决问题。

如果内容中有错误，欢迎大家指正。谢谢！