                        课程
                    
                        /前端开发
                        
                            /前端工具
                        
                        /webpack深入与实战

file-loader 配置问题

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

03:35

薛3

2017-05-24

源自：webpack深入与实战 4-7

关注问题我要回答

4170

操作

收起

3 回答

慕码人1790349 回答被采纳 +3 积分
2017-05-25

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/'
          }
        }
      }
    ]
  }

试试这样配置呢

2 回复有任何疑惑可以回复我~

收起回答

薛3 提问者

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

2017-05-25 回复有任何疑惑可以回复我~

薛3 提问者

name: '/[name].min.[ext]', outputPath: 'img'

2017-05-25 回复有任何疑惑可以回复我~

薛3 提问者

非常感谢！

2017-05-25 回复有任何疑惑可以回复我~

慕仔3155523
2017-09-06

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

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

0 回复有任何疑惑可以回复我~

收起回答

薛3 提问者
2017-05-25

{ // 图片资源的加载及压缩
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 的路径还是没有办法解析.很是苦恼!

0 回复有任何疑惑可以回复我~

收起回答