Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

页面异步加载打包后,样式能否打包到一个css文件中 #2843

Open
ZiQiangWang opened this issue Oct 30, 2018 · 6 comments
Open

Comments

@ZiQiangWang
Copy link

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
Copy link
Contributor

@ZiQiangWang
Copy link
Author

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

@ZiQiangWang
Copy link
Author

进行了如下配置

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

但是打包结果如下:
image

@tangdaohai
Copy link

我解决了这个问题。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)
  }
}

image

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

@mumu1993
Copy link

我解决了这个问题。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)
  }
}

image

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

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

@meteorlxy
Copy link
Member

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

webpack-contrib/mini-css-extract-plugin#85

目前只在 Webpack 5 中解决了。

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants