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()
    ]
}

 

posted @ 2021-03-13 11:01  maycpou  阅读(110)  评论(0编辑  收藏  举报