webpack 4.x一起学习（三）
2018-11-09 本文已影响36人
感觉不错哦
基于前两篇的文章我们继续学习webpack
处理HTML中的图片
平时我们简单的网站简单的效果会直接写入html标签中，比如img，或者background背景图
html中的图片我们如何打包呢
npm install html-withimg-loader --save 我们使用这个插件
module:{
rules: [
{
// test: /\.css$/,
// use: [ 'style-loader', 'css-loader' ]
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000,
}
}]
},
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader'] 安装好之后直接在rules中使用
}
]
},
在html中我们放入一张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="tupian"></div>
<img src="./image/1.jpg" alt="" srcset="">
<script src="./../dist/bundle.js"></script>
</body>
</html>
然后我们webpack一下 此时生成的HTML中的图片也已经变成base64了
这个比较简单！
Less文件的打包和分离
只是测试less 因为sass 需要安装ruby环境 less直接安装即可 都是一样的配置
npm install --save-dev less
npm install --save-dev less-loader
安装好后，需要在webpack.config.js里编写loader配置，当然要想正确解析成CSS，还是需要style-loader和css-loader的帮助
{
test: /\.less$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}]
}
还记得loader的编译顺序吧，从右到左（从下到上）
我们编译一个less文件
@base :#000;
#gogo{
width:300px;
height:300px;
background-color:@base;
}
会less的可以自行编译，不会的小伙伴可以复制
在测试的时候 出了一个小小的bug，因为我不是很喜欢使用webpack-server-dev，在之前设置图片路径的时候我们安装了这个应用，而且我文件夹的名字是中文，所以我自己本地连接打开的时候都是乱码，所以我重新配置了一下，我把自己重新配置的代码，不带server的代码复制一下
src 下的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="tupian"></div>
<div id="gogo"></div> =>这个ID 对应less的ID
</body>
</html>
entry.js
import css from './css/index.css';
import less from './css/black.less'
src/css/index.css
body{
background-color: royalblue;
color: white;
}
#tupian{
background-image: url(../images/1.jpg);
width:466px;
height:453px;
}
src/css/black.less
@base :#000;
#gogo{
width:300px;
height:300px;
background-color:@base;
}
webpack.config.js
const path = require('path')
const htmlPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin")
module.exports={
mode:'production',
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:'./src/entry.js',
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'bundle.js',
},
//模块：例如解读CSS,图片如何转换，压缩
module:{
rules: [
{
// test: /\.css$/,
// use: [ 'style-loader', 'css-loader' ]
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000,
}
}]
},
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
},{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}
]
},
//插件，用于生产模版和各项功能
plugins:[
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("/css/index.css"),
],
devServer:{}
}
不管是sass 还是less，直接引入html无法编译，只有转成css才可以
我们webpack一下
黑块已经出现了，所以我们编译成功，编译转化后的代码这个无所谓了，可以单独学习一下less了解一下，sass的用法完全一样
