Webpack之image

CSS中的图片处理

直接从外部引入css的背景等图片是打包不出来的，需要用到url-loader和file-loader。

file-loader：解决引用路径的问题，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。

npm install --save-dev file-loader url-loader

module:{
        rules: [
            {
              test: /.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit: 5*1024 // 图片大小 > limit 使用file-loader, 反之使用url-loader
                       outputPath: 'images/' // 指定打包后的图片位置
                   }
               }]
            }
          ]
    }

url-loader封装了file-loader，使用了url-loader后就不需要使用file-loader了。

分离CSS 及分离后的图片处理

npm install --save-dev extract-text-webpack-plugin

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new ExtractTextWebpackPlugin('css.css');
let lessExtract = new ExtractTextWebpackPlugin('less.css');
let sassExtract = new ExtractTextWebpackPlugin('sass.css');

...

module: {
    rules: [
         {
            test: /.css$/,
            loader: cssExtract.extract({
                use: ['css-loader?minimize']
            })
        }, {
            test: /.less$/,
            loader: lessExtract.extract({
                use: ['css-loader?minimize', 'less-loader']
            })
        }, {
            test: /.scss$/,
            loader: sassExtract.extract({
                use: ['css-loader?minimize', 'sass-loader']
            })
        }
    ]
}

...

plugins: [
    cssExtract,
    lessExtract,
    sassExtract
]

处理图片路径问题

const PUBLIC_PATH='htp://localhost:8080/';

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:PUBLIC_PATH
}

在新版本中，extract-text-webpack-plugin会出现问题，安装时用npm install --save-dev extract-text-webpack-plugin@nxet或者用mini-css-extract-plugin代替。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // replace ExtractTextPlugin.extract({..})
          "css-loader"
        ]
      }
    ]
  }
}

处理html中的图片

html-withimg-loader

{
    test: /.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}