webpack11——打包文件分类

使用背景：如何将打包后的不同类型的文件放置在不同的文件夹下，比如css文件，图片等

解决办法::可以在不同的文件类型的设置下，在option选项中添加一个outputPath的属性

        {
                test:/\.(png|jpg|gif)$/,
                //做一个限制，当我们的图片小于多少k的时候，用base64来转化
                
                // use:'file-loader' 不做限制时候的写法
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1,//如果图片小于200k，全部变成base64，否则用file-loader产生真实的图片。
                        outputPath:'img/'  //记住这里一定要有/
                    }
                }
            },

2、如果是css文件

       new MiniCssExtractPlugin({
            filename: 'css/main.css' //被抽离的css样式的名称

        }),

在上面的两种情况下，打包后的模板文件中，会直接将文件引入的路径进行改正

2.如果我只是给项目中所有的url，以及引入的文件，加一个公共的地址所在地，

可以再输出口中进行配置

  output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath:'http://localhost:8080/ ' //给所有的url加入前缀
    },

注：这个路径必须是实际存在的路径，一般是我们项目生成的服务器路径。比如
http://localhost:8080/

3.如何只给一种类型的引用加上共同的路径前缀

把公共输出的publicPath删除，只需要在图片插件那里设置。

          {
                test:/\.(png|jpg|gif)$/,
                //做一个限制，当我们的图片小于多少k的时候，用base64来转化
                
                // use:'file-loader' 不做限制时候的写法
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1,//如果图片小于200k，全部变成base64，否则用file-loader产生真实的图片。
                        outputPath:'img/', //不能忘记这里的/
                        publicPath:'http://localhost:8080/img/'
                    },
                    
                }
            },

新手初学，文中内容如有错误，欢迎指正