webpack笔记（1）——样式表中使用背景图找不到资源

前几天查资料，看到一句深有同感的话：“webpack--神一样的存在。无论写了多少次，再次相见，仍是初见。”谁用谁知道~ 哈哈哈哈哈~ 下面记录一些使用过程中遇到的点~ 版本是webpack4，考虑到每一点都有点长，于是乎分系列记录。

样式表中使用背景图找不到资源

解决： 使用url-loader，相应配置如下

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 100,
    name: path.posix.join('resource/img/[name].[hash:7].[ext]'),
    // publicPath:'http://www.baidu.com/' // cdn域名
  }
}

• 生产环境时，如果资源放在cdn上，可以配置publicPath，以上述图片为例，效果就是打包出来的图片资源为http://www.baidu.com/resource/img/[name].[hash:7].[ext]

• 如果设置了css样式抽离成单独的文件，在不配置publicPath的时候，url-loader处理过后的静态资源文件的路径是根据抽离的css文件路径来定的，举例来说

  
  
  image.png

image.png

上图代码配置了抽离css到单独的文件，将css文件打包到dist/css文件夹下面，在未指定publicPath时，css文件中图片资源的路径如下

image.png

而实际图片资源的位置要看配置时写的路径来定，以上面的配置为例，实际上图片是被打包到dist文件夹的根目录下，如果配置是使用注释起来的``name: path.posix.join('resource/[name].[hash:7].[ext]')这一段的话，图片资源将被打包到dist/resource文件夹下，这就导致了页面找不到图片资源。
总结：如果抽离的css文件，同时使用url-loader处理了资源文件，在配置的时候需要指定publicPath,可以在入口文件中配置，也可以在配置url-loader时候配置，如下：

output: {
        filename: '[name].js',
        publicPath: '/',
        chunkFilename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },

或

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 100,
    name: path.posix.join('resource/img/[name].[hash:7].[ext]'),
    publicPath: '/'
  }
}

这样可以保证打包后css文件中的资源路径是[publicPath]/[你配的路径][文件名].[扩展名]，这样就不会找不到文件了。
总的来说，开发环境不用配置抽离css，则不会存在样式文件中资源路径不对的问题，同时另外一个好处是在开发环境我们一般会配置dev-server用来自动更行页面效果，如果使用了抽离css的配置，还需添加css-hot-loader配置才能在修改样式后使页面的样式自动更新，否则需要手动刷新浏览器，而如果不抽离css，样式则可以自动刷新，事实上，开发环境我们只要配置好devtool比如devtool: 'inline-source-map'，就可以很方便的定位到对应的样式写在哪个文件，而我们想要知道的，也就是这个信息了，所以个人认为在开发环境无需配置抽离css。
上述总结，如有不妥，欢迎指正~~