元素
元素
工具
博客
问答

Webpack DllPlugin 打包后 CSS 样式丢失了怎么办？

轩辕楠楠 阅读 3
前端

我用 Webpack 的 DllPlugin 把 React 和一些公共库单独打包了，但发现页面上的样式全没了。明明没动 CSS 文件，也不报错，就是样式不生效。

我项目里有段全局样式是这样写的：

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

DllPlugin 配置应该没问题，因为 JS 能正常加载，但这段 CSS 在 dll 打包之后就完全不生效了，是不是哪里漏了？

LoaderPlugin打包优化
我来解答 赞 9 收藏
二维码
手机扫码查看
反馈
1 条解答
欧阳风云
欧阳风云 Lv1
这是一个典型的 DllPlugin 坑。DllPlugin 只负责把 JS 模块 ID 映射关系写到 manifest.json 里，它根本不管 CSS 这种资源文件。所以你打包出来的 dll.js 引用了，但 dll.css 没人管，自然就丢了。

你的 Dll 配置里应该用了 MiniCssExtractPlugin 或者类似的 loader 把 CSS 抽出来了，文件确实生成了，但是主项目的构建流程不知道要把这个 CSS 文件塞进 HTML 里。

解决办法很简单，你得手动把这个 DLL 生成的 CSS 文件加到 HTML 里。最省事的办法是用 add-asset-html-webpack-plugin，把那个 CSS 文件路径加进去。

在你的主项目 webpack 配置里，大概是这样改：

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

const path = require('path');



module.exports = {

  // ... 其他配置

  plugins: [

    // 引用 JS

    new AddAssetHtmlPlugin({

      filepath: path.resolve(__dirname, './dll/vendor.dll.js')

    }),

    // 重点来了，手动把 CSS 也加进去

    new AddAssetHtmlPlugin({

      filepath: path.resolve(__dirname, './dll/vendor.dll.css'),

      typeOfAsset: 'css', // 指定类型是 css，它会生成  标签而不是
相关推荐
元素
元素
工具
博客
问答
登录/注册