分离styles.css的同时,分离出了styles.js

来源:4-9 CSS 文件的代码分割

renderman

2019-03-01

我在分离css时,把js也分离出来了(因为使用了一些css module模块)。

dist/styles_4e7f6b.js (为什么会被分离出来,以及如何避免被分离出来?)
dist/styles_4e7f6b.js.map (同上)
dist/styles_eeefdb.css

希望cssmodule代码不要单独分离出来,我应该这么做呢?
除了用文件名来做区分,请教DellLee和同学们还有什么办法


// webpack分离代码的相关配置
optimization: {
  usedExports: true, // tree shaking开关
  splitChunks: {
    chunks: "all",
    minSize: 1024 * 1,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: "_",
    name: true,
    cacheGroups: {
	  /* 相关配置 */
      style: {
        test: /.(css|less)$/,
        name: "styles",
        enforce: true
      },
      package: {
        priority: -10,
        test: /[/]node_modules[/]/,
        minChunks: 1
      },
      common: {
        priority: -100,
        minChunks: 2,
        reuseExistingChunk: true
      }
    }
  }
},
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name]_[contenthash:6].css",
    chunkFilename: "[name]_[contenthash:6].css"
  })
],
写回答

1回答

Dell

2019-03-02

MiniCssExtractPlugin 不要用即可

0
3
Dell
回复
renderman
我不知道同学你课程学习到哪里了,如果你真的学懂了,我依次告诉你怎么解。 1. 模块化的样式,在loader中,不要配置MiniCssExtractPlugin.loader,而全局使用这个loader即可 2. sourceMap 你只要把devtool设置成false即可
2019-03-02
共3条回复

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程