12. 重学webpack——提取CSS，指定CSS和图片的目录

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

提取CSS，指定CSS和图片的目录

• 因为CSS的下载和JS可以并行,当一个HTML文件很大的时候，我们可以把CSS单独提取出来加载

1. 提取CSS，打包后的css放到指定目录

这里需要借助到mini-css-extract-plugin，并配置两个地方(详见代码)

// webpack.config.js
// 需要修改两个地方
	//  1. 在样式的loader最后一个style-loader改成MiniCssExtractPlugin.loader
	//  2. 调用miniCssExtractPlugin，并且指定输出的filename

module: {
    rules: [
        { test: /\.txt$/, use: 'raw-loader' },
              { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, // 在样式的loader最后一个style-loader改成MiniCssExtractPlugin.loader
              { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }, // 在样式的loader最后一个style-loader改成MiniCssExtractPlugin.loader
              { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }, // 在样式的loader最后一个style-loader改成MiniCssExtractPlugin.loader
        { test: /\.(jpg|png|bmp|gif|svg)$/, 
         use: [{
             loader: 'url-loader', 
             options: {
                 esModule: false,
                 name: '[hash:10].[ext]',
                 limit: 8*1024
             }
         }]
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({
        filename: '[name].css'
    })
]

这时候，进行构建，会将css的文件单独抽出到dist下

那么，如何将抽离的css放到指定文件夹呢？

• 只需要将插件配置项filename的值改为路径形式，比如filename: '[name].css'改为filename: 'css/[name].css'，这样，就能在dist下创建css目录，将样式打包到该目录下

2. 图片放到指定目录

需要将图片放到指定目录，只需要在url-loader配置outputParg和publicPath属性即可

 module: {
     rules: [
         { test: /\.txt$/, use: 'raw-loader' },
         { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
         { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
         { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },
         { test: /\.(jpg|png|bmp|gif|svg)$/, 
          use: [{
              loader: 'url-loader', 
              options: {
                  esModule: false,
                  name: '[hash:10].[ext]',
                  limit: 8*1024,
                  outputPath: 'images', // 在这里配置输出的文件路径，在这里能够将图片放到dist下的images下
                  publicPath: '/images' // 这个配置，是更改引用图片时候的路径，如果不写，则默认与outputPath值前面加一个'/'，表示根路径(域名)下开始。如果写了，则代表图片前面会加上该路径。这里需要注意：如果outputPath是'images'，但是publicPath写了其他的，比如'abcd'，那么就会导致编译后图片地址为‘域名/abcd/图片’,而dist下的图片在`dist/images/图片`，显然，这时候页面引用的地址是找不到图片的，所以这样资源引用就是错误的！所以，建议publicPath值为'/'+outputPath的值，除非你讲图片放到了CDN等资源服务器上。
                  // 这里特别注意：publicPath为'/images'与'images'是有区别的，前者是域名后跟/images,例如localhost/images/xxx.png，而后者等同于'./images/，是对当前路径的拼接，假设你css文件中引用了background地址为'./xxx.png'，而你这个css抽离到了styles文件夹下，那么这时候其实网页上引用的图片地址是'localhost/styles/xxx.png'，而你的publicPath写成了'images‘，相当于css文件引用的background的地址从'./xxx.png'改成了'./images/xxx.png'，那么打包出来样式放在styles文件夹下，这时候其实网页上引用的图片地址是'localhost/styles/images/xxx.png' ，但是outputPath又是'images'，也就是其实图片都到了images下，并不是在styles下，这就会有问题了。这就是两个值带不带'/'产生的区别。
              }
          }]
         }
     ]
 },

• outputPath: 'images' ： 在这里配置输出的文件路径，在这里能够将图片放到dist下的images下
• publicPath: '/images'：这个配置，是更改引用图片时候的路径，如果不写，则默认与outputPath值前面加一个’/’，表示根路径(域名)下开始。如果写了，则代表图片前面会加上该路径。这里需要注意：如果outputPath是’images’，但是publicPath写了其他的，比如’abcd’，那么就会导致编译后图片地址为‘域名/abcd/图片’,而dist下的图片在dist/images/图片，显然，这时候页面引用的地址是找不到图片的，所以这样资源引用就是错误的！所以，建议publicPath值为’/’+outputPath的值，除非你讲图片放到了CDN等资源服务器上。

3.publicPath为’/images’与’images’的区别

publicPath为’/images’与’images’是有区别的，前者是域名后跟/images,例如localhost/images/xxx.png，而后者等同于’./images/，是对当前路径的拼接，假设你css文件中引用了background地址为’./xxx.png’，而你这个css抽离到了styles文件夹下，那么这时候其实网页上引用的图片地址是’localhost/styles/xxx.png’，而你的publicPath写成了’images‘，相当于css文件引用的background的地址从’./xxx.png’改成了’./images/xxx.png’，那么打包出来样式放在styles文件夹下，这时候其实网页上引用的图片地址是’localhost/styles/images/xxx.png’ ，但是outputPath又是’images’，也就是其实图片都到了images下，并不是在styles下，这就会有问题了。这就是两个值带不带’/'产生的区别。

上面需要特别注意

关于publicPath，可以阅读以下文章：

• 重学webpack——webpack5.0之深入了解output的publicPath、htmlWebpackPlugin的publicPath和devServer的publicPath区别