webpack(5) 文件打包分类

打包文件分类

我们的文件不能都放在一个文件夹下，所以需要不同的文件夹进行管理

分离图片

{
    test: /.(png|jpe?g|gif)$/i,
	use: [
            {
                loader: 'url-loader',
                options:{
                    outputPath: 'images',//设置路径
                    limit:1,
                    esModule:false
                }
            },
        ],   
}

分离css文件

 new MiniCssExtractPlugin({
     filename:'css/main.css'
})

此时打包出 的dist文件目录如下

|dist

​ |-css

​ |-main.css

​ |-image

​ |-351651054.png

​ |-index.html

​ |-index.js

添加服务器域名 publicPath

若想给所有的资源都加上

output: {
        filename: 'index.js',//文件名
        path: path.resolve(__dirname, 'dist'),//路劲,
        publicPath:'http://www.windeyes/'//加公共路径
    },

只给图片资源加上

{
    test: /.(png|jpe?g|gif)$/i,
    use: [
            {
                loader: 'url-loader',
                options:{
                    outputPath: 'images',//设置路径
                    publicPath:'http://122454/',
                    limit:1,
                    esModule:false
                }
            },
        ],
}