问答详情
源自:4-7 处理图片以及其他文件

file-loader 配置问题

那个,老师,好像在 webpack 2.x 版本 file-loader 配置变了.怎么写,打包文件都没图片输出

提问者:薛3 2017-05-24 16:35

个回答

  • 慕码人1790349
    2017-05-25 13:56:47
    已采纳

    module: {
        rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader'
            })
          },
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['latest']
              }
            }
          },
          {
            test: /\.(jpg|jpeg|png|gif)$/i,
            use: {
              loader: 'file-loader',
              options: {
                name: '[name]?[hash:8].[ext]',
                outputPath:'asset/img/'
              }
            }
          }
        ]
      }

    试试这样配置呢

  • 慕仔3155523
    2017-09-06 15:53:20

    为什么我的html文件中的src引入的图片不会被替换成打包之后的文件夹下的图片呢

    {
        test: /\.(jpg|jpeg|png|gif)$/i,
        use: {
            loader: 'file-loader',
            options: {
                name: '[name]?[hash:8].[ext]',
                outputPath: 'assets/images/'
            }
        }
    },


  • 薛3
    2017-05-25 14:17:51

    { // 图片资源的加载及压缩
    test: /\.(png|jpg|gif|svg)$/i,
    use: [{
    loader: "file-loader",
    options: {
    name: '/[name].min.[ext]',
    outputPath: 'img'
    }
    },
    { // 压缩图片用的 loader
    loader: 'image-webpack-loader'
    }
    ],
    include: [path.resolve(__dirname, 'src/images')]
    },

    我试了一下.会多嵌套一层,我是这样配置的.就可以了.

    但是,对于引用子组件后,子组件内部的 css 文件图片的 url 的路径还是没有办法解析.很是苦恼!