Webpack 打包后样式不起作用的解决方法

在前端开发中，Webpack 是一个非常常用的工具，它可以将多个 JavaScript 文件打包成一个文件，以及对样式、图片等资源进行处理。但是，在使用 Webpack 打包后，有时候会遇到样式不起作用的问题，这是因为 Webpack 默认会将样式文件当作模块来处理，而不是直接将其插入到 HTML 中，因此需要进行一些配置才能解决这个问题。

解决方法

方法一：使用 style-loader 和 css-loader

在 Webpack 中，可以使用 style-loader 和 css-loader 这两个 loader 来处理样式文件。其中，css-loader 可以将 CSS 文件转换成 JavaScript 模块，而 style-loader 可以将生成的 CSS 模块插入到 HTML 的 head 中。

首先，在命令行中安装这两个 loader：

npm install style-loader css-loader --save-dev

然后，在 Webpack 配置文件中添加以下代码：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

这样，Webpack 就会将所有以 .css 结尾的文件都使用 style-loader 和 css-loader 进行处理。

方法二：使用 MiniCssExtractPlugin

如果不想将样式文件插入到 HTML 中，可以使用 MiniCssExtractPlugin 将样式文件提取成单独的文件。这样做的好处是可以将样式文件缓存起来，从而提高网站的加载速度。

首先，在命令行中安装 MiniCssExtractPlugin：

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

然后，在 Webpack 配置文件中添加以下代码：

// javascriptcn.com 代码示例
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }
  ]
},
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
  })
]

这样，Webpack 就会将所有以 .css 结尾的文件都使用 MiniCssExtractPlugin 进行处理，并将提取出来的样式文件命名为 [name].[contenthash].css。

示例代码

以下是一个简单的示例代码，演示了如何使用 style-loader 和 css-loader：

// index.js
import './style.css'

console.log('Hello, world!')

/* style.css */
body {
  background-color: #f0f0f0;
}

// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

在浏览器中打开 index.html，就会发现背景色变成了灰色。

总结

本文介绍了两种解决 Webpack 打包后样式不起作用的方法：使用 style-loader 和 css-loader，以及使用 MiniCssExtractPlugin。其中，使用 MiniCssExtractPlugin 可以将样式文件提取成单独的文件，从而提高网站的加载速度。无论使用哪种方法，都需要在 Webpack 配置文件中进行相应的配置。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583d2a1d2f5e1655de9cdaf