webpack图片处理，文件分类和打包多页面应用

一、webpack的图片处理

1、file-loader 默认会在内部生成一张图片到 build目录下，把生成的图片的名字返回回来。
通过js创建图片对象生成图片

import logo from './logo.JPG';
let img = new Image();
img.src = logo;
document.body.appendChild(img);
//1、先安装file-loader
yarn add file-loader -D
//2、在webpack.config.js里进行配置
rules:[
	{
       test:/\.(png|jpg|gif|JPG)$/,
        //做一个限制 当我们的图片 小于多少k的时候 用base64来转化
        //否则用file-loader产生真实的图片
        use:{
                loader:'url-loader',
                 options:{
                     limit:200*1024
                 }
             }
    }
]

在html文件中通过img标签引入图片

<img src="./logo.JPG" alt="">
//1、先安装插件
yarn add html-withimg-loader -D
//2、在webpack.config文件中配置
rules:[
	{
         test:/\.html$/,
         use:'html-withimg-loader'
     }
]

在css文件中通过样式引入

div{
background:url("./logo.png");
}
//查看资料说css-loader可以直接解析，但亲测并没有成功，还希望知道的朋友可以
//帮我解答一下，谢谢

二、打包文件分类

把图片打包到固定的img文件夹下

rules:[
	{
        test:/\.(png|jpg|gif|JPG)$/,
        use:{
            loader:'url-loader',
            options:{
                limit:200*1024,
                outputPath:'/img/', //把打包后的图片生成到固定的目录下
                publicPath:'http:www.sensen.cn' //把图片打包到某一域名下
            }
        }
    }
]

把打包后的css放到固定的css目录下

plugins:[
	new MiniCssExtractPlugin({
       filename:'css/main.css'  //打包到css目录下
    })
]
rules:[
	{
       test:/\.css$/,
        // use: ['style-loader','css-loader'],
        //或者以下写法
        use:[
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader'
        ]
    }
]

给所有文件配置公共的域名

output: {
    filename: 'bundle.js', //打包后的文件名
    path: path.resolve(__dirname,'dist'), //路径必须是一个绝对路径
    publicPath:"http://www.zhufeng.cn" //公共域名
}

三、打包多页应用

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //多入口
    mode:'development',
    entry:{
        home:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html', //打包html所用的模板
            filename:'home.html', //打包之后的html文件名
            chunks:['home'] //html文件对应引入的js
        }),
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'other.html',
            chunks:['other']
        })
    ]
}