webpack(9)打包图片
1.图片的引用在css文件中，比如在之前的inde.css文件中添加如下属性：background-image: url('../img/1.jpg');
安装包：npm install url-loader file-loader -D
然后再webpack.config.js中配置：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
{test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{//png和jpg后缀的文件使用url-loader打包
publichPath:'./images',//打包后的图片引用的路径，即在原来css的路径写的是图片真实存在的路径，这里配置的是我们把图片打包到build后，图片的引用路径。
outputPath:'images/',//打包后的图片文件的输出路径
limit:1024*16,//如果图片小于16kb则直接以base64的方式插入css,就不会生成真实的图片文件
name:'[name].[ext]'//图片打包后的名字，这里的表达式表示使用原来的名称。如果没有这个配置默认的是[hash].[ext]，即打包后图片的名称变为一串hash码。
}}]}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
//new OptimizeCssAssetsPlugin()
]
}
2.图片的引用在html中，在index.html中添加下面代码：
<img src="./img/2.png" >
安装包： npm install html-loader@1.3.2 -D //注意这里最好安1.3.2版本的，我在测试的时候安装了2.0.0及其以上版本打包的时候都报错了
webpack.js.config中配置：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
{test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{
publichPath:'./images',
outputPath:'images/',
limit:1024*16,
name:'[name].[ext]'
}}]},
{test: /\.(html)$/, use:['html-loader']}//配置使用html-loader，这里虽然名字叫html-loader，但是实际是用来处理html中的图片插入的。html的打包还是使用的下面的HtmlWebpackPlugin
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
//new OptimizeCssAssetsPlugin()
]
}
