webpack打包文件名不一致的问题

现象

使用webpack打包，包名使用chunkhash方式，在不同机器下构建同一份代码，hash值不同，也就是代码块的包名不一样

分析

查看打包出的map文件，发现_buildModule使用了绝对路径，babel-preset-react-app "D_XXX_XXX_node_modules_babel_preset_react_app_xxx"

引起的原因，可能是使用了loadable进行了代码拆分导致babel-preset-react-app使用了绝对路径 （后续发现css文件也有这问题，主要是style-loader react-app）

hash命名策略，可参考这篇文章
从源码看webpack的hash策略

方案

"presets": [["react-app", { "absoluteRuntime": false }]],

              presets: [
                [
                  require.resolve('babel-preset-react-app/dependencies'),
                  { helpers: true, absoluteRuntime: false }
                ]
              ],

            test: cssRegex,
            exclude: cssModuleRegex,
            loader: getStyleLoaders({
              importLoaders: 1,
              sourceMap: shouldUseSourceMap
              sourceMap: false
            })

其他

将相对路径，改为绝对路径 如果convertToAbsoluteUrls 和sourceMaps 同时有效的话，相对路径在css注入代码前，会被改为绝对路径

原

test: /\.css$/,
use: [
  {
    loader: require.resolve('style-loader'),
    options: {
      sourceMap: true
    }
  },

  {
    loader: require.resolve('css-loader'),
    options: {
      importLoaders: 1,
      sourceMap: true
    },
  },

后

rules: [
      {
        test: /\.css$/,
        use: [
          { 
            loader: 'style-loader',
            options: {
              sourceMap: true,
              convertToAbsoluteUrls: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              convertToAbsoluteUrls: false
            }
          }
        ]
      }
    ]