webpack5，分离css单独文件，出错

最新推荐文章于 2024-09-12 16:09:28 发布

u011010407

最新推荐文章于 2024-09-12 16:09:28 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： nodejs webpack 文章标签： webpack 分离css

本文链接：https://blog.youkuaiyun.com/u011010407/article/details/80482898

webpack 同时被 2 个专栏收录

3 篇文章

订阅专栏

nodejs

2 篇文章

订阅专栏

本文介绍如何在Webpack5中使用mini-css-extract-plugin插件将CSS从JS文件中分离出来，以便实现更优的资源加载策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下废话可以跳过

＝＝＝＝＝＝＝＝＝＝＝废话 begin ＝＝＝＝＝＝＝＝＝＝＝＝＝＝

前段时间学习了会node，webpack。

今天打算使用他做个小页面，发现以前看到的例子都是js和css打包到同一个文件里面，他有他的好处（我并不理解），但我喜欢css是css文件，js是js文件，你进来看，肯定也是希望css单独出来，可以的话留下你的想法，交流交流可好！

＝＝＝＝＝＝＝＝＝＝＝废话 end ＝＝＝＝＝＝＝＝＝＝＝＝＝＝

webpack4以上版本不在使用“extract-text-webpack-plugin”，而改为“mini-css-extract-plugin”

安装：

npm install --save-dev mini-css-extract-plugin

使用（webpack.config.js）

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}