Vue-cli: 页面异步加载打包后，样式能否打包到一个css文件中

[ZiQiangWang]

Version

3.0.5

Reproduction link

Node and OS info

mac/node v8.9.3/npm 6.1.0

What is expected?

所有css能输出到一个文件中

What is actually happening?

每个页面分别有css文件

[PanJiaChen]

https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file

[ZiQiangWang]

这个我也看到了，这个是要在plugin里配置还是在css.extra中配置？貌似vue inspect没有看到这个plugin

[ZiQiangWang]

进行了如下配置

 configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }

但是打包结果如下：

[tangdaohai]

我解决了这个问题。https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry

通过入口文件配置splitChunks可以生效。

// vue.config.js
function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  chainWebpack: (config) => {

    const splitOptions = config.optimization.get('splitChunks')
    // 这里的 appStyles 中的 app 是入口文件的配置名称(从 vue inspect 中可以得到)
    splitOptions.cacheGroups.appStyles = {
      name: 'styles',
      test: (m, c, entry = 'app') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
      chunks: 'all',
      minChunks: 1,
      enforce: true
    }
    config.optimization.splitChunks(splitOptions)
  }
}

but 最后多了个styles.js, 里面是jsonp相关的一段js代码...

[mumu1993]

我解决了这个问题。https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry

通过入口文件配置splitChunks可以生效。

// vue.config.js
function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  chainWebpack: (config) => {

    const splitOptions = config.optimization.get('splitChunks')
    // 这里的 appStyles 中的 app 是入口文件的配置名称(从 vue inspect 中可以得到)
    splitOptions.cacheGroups.appStyles = {
      name: 'styles',
      test: (m, c, entry = 'app') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
      chunks: 'all',
      minChunks: 1,
      enforce: true
    }
    config.optimization.splitChunks(splitOptions)
  }
}

but 最后多了个styles.js, 里面是jsonp相关的一段js代码...

不能打成多个chunk么，只排除0kb的

[meteorlxy]

but 最后多了个styles.js, 里面是jsonp相关的一段js代码...

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85

目前只在 Webpack 5 中解决了。

另外 test 条件也许可以简化：

test: (m) => /css\/mini-extract/.test(m.type),