webpack4 配置公共JS 和 CSS 不打包，只做单独压缩

Question

目前有common.js和env.js，以及base.scss都是通过require进来的。另外还有个Jquery

HtmlWebpackPlugin配置的内容是

1.目前的问题是每次打包都把common.js和env.js打进了对应入口文件的JS里，而base.scss也是进入了对应的css里，没有单独打包。
2.我查到一个配置，但是用了这个配置就会把公共的JS打包进Jquery里

3.有没有办法能把公共文件，单独打包，Jquery和common，env单独打包，base也单独打包

Answer 1

首先，你贴的那段配置根本不是提取 jquery 的，而是提取所有的 js 文件，打成叫jquery的包。

cacheGroups: {
    common: {
      // 实际路径
      test: path.resolve(__dirname, '../src/assets/js/common'),
      name: "commmon-test",
      chunks: "all",
      enforce: true
    }
}

非 node_modules 下的包可以使用这种配置方式，jquery 同理，如果你的 jquery 是通过 npm 安装的，我没试出来改怎么提取。样式文件也一样，但是样式文件有个问题，虽然讲 webpack 万物都为模块，但是 样式文件从逻辑上还是从 js 里提取出来的，生成 base.css的同时，会多出来一个base.js文件（基本是空的）。

还是在另一个回答下回答过的答案，像 jquery 这种包可以使用cdn（或其他路径）直接引入 html，在 webpack 里通过配置 externals 去解决引入。

Answer 2

里面的是直接分离js文件
这里有一个 webpack4 例子,你可以查看一下 https://github.com/crlang/eas... 。

Answer 3

js单独打包用vendor配置项
css单独打包用extract-text-webpack-plugin