js提取指定网站内容( webpack中的link标签导入样式，这时候应该怎么做呢？)

　　js提取指定网站内容(

webpack中的link标签导入样式，这时候应该怎么做呢？)

　　

　　在上一篇文章文章中我们讲解了webpack中的loader，使用less、less-loader、css-loader、style-loader将js中导入的less文件通过webpack打包到页面中，但是我们发现页面中的样式确实存在，但是页面的样式是以样式标签的形式写入页面的。在实际开发中，我们其实更喜欢使用链接标签来导入样式。这个时候我们应该怎么做？

　　一、使用 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项中实例化插件（插件需要安装、定义、实例化如前所述），最后在模块中定义处理less的规则，而注释掉的部分则是在解释加载器的时候用到的。它不会被删除以进行比较。

　　plugins项中mini-css-extract-plugin的实例化参数filename其实和output和html-webpack-plugin中定义的filename一样，就是给输出文件命名（可能有人说没有定义在 output? 中，其实 webpack 的入口和输出只有 js，其他的都是由 plugins 或 loader 处理的，所以不要混淆）。

　　chunkFilename 和 html-webpack-plugin 中的 chunk 类似，但是下面的 [id].css 不太好理解（如果真的看懂了就这样写，固化不会改变）。实际上，在这个地方没有办法写出实际的具体名称。因为这是由以下加载程序中的 mini-css-extract-plugin 插件在内部生成的。

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

　　

　　二、处理图片资源

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

　　

　　添加了三张图片，但实际上只是一张不同名称的图片。然后分别修改less文件、js文件、html文件。每个文件的内容如下：

　　

　　无索引

　　

　　index.js

　　

　　索引.html

　　图片资源处理的loader有很多，这里我们使用url-loader，对于页面中的img标签，我们使用html-withimg-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，为什么不把它放在输出中呢？因为输出中的 publicPath 会影响所有路径。这里我们只希望css-loader在处理完css后只解决样式表中的路径问题。

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

　　当三、遇到以html或htm结尾的文件时，使用html-withimg-loader处理其中的图片资源。

　　对于前端模块化开发，不建议直接在页面上使用图片链接，而是将图片导入js，但我觉得不太现实。毕竟，img 标签不是装饰品。

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

　　

　　我们的图片大小超过50K，所以在dist目录下生成imgs文件夹，测试src中的图片。

　　如果我们把limit的值改成102400，图片会直接转成dataurl格式，而不是保存到dist目录下，输入如下图片：

　　

　　我们可以发现它们的链接地址是不同的。

　　三、总结

　　我们分五个部分简要介绍 webpack4 的一些最基本的知识点，包括：

　　1、安装

　　安装节点的先决条件

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

　　为了防止plugin或者loader被下载，引入了cnpm。

　　2、输入输出

　　webpack.config.js webpack 配置文件

　　npx webpack 命令运行 webpack

　　进入和退出的最基本概念

　　3、插件

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

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

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

　　4、加载器

　　模型模式（开发模式、生产模式）

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

　　这些知识点仅供初学者快速运行一个webpack，避免踩坑，在实际项目中遇到问题时确切知道从哪里着手解决问题。

　　内容如有错误，请指正。谢谢！