CSS 是否可以使用webpack将CSS和JS分开生成

在本文中，我们将介绍如何使用webpack将CSS和JS分开生成。

阅读更多：CSS 教程

什么是webpack？

webpack是一个现代的JavaScript应用程序静态模块打包器。它能够将各种不同类型的模块打包成一个或多个bundle.js文件，以便在浏览器中运行。

webpack可以生成CSS吗？

是的，webpack可以生成CSS。通常情况下，我们会使用webpack的插件，如css-loader和style-loader来处理CSS文件。

css-loader

css-loader是webpack的一个插件，用于解析CSS文件，并将其转换为JavaScript对象。通过使用css-loader，我们可以将CSS模块化，并在应用程序中引用它们。

以下是一个示例，演示如何在webpack中配置css-loader：

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

style-loader

style-loader也是webpack的一个插件，用于将CSS模块注入到HTML文件中。它会在运行时将CSS样式添加到页面上。

以下是一个示例，演示如何在webpack中配置style-loader：

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

如何将CSS和JS分开生成？

除了将CSS和JS一起打包生成bundle.js文件外，我们还可以通过使用ExtractTextWebpackPlugin来将它们分开生成。

ExtractTextWebpackPlugin

ExtractTextWebpackPlugin是webpack的一个插件，用于将CSS提取到单独的文件中。它可以将CSS文件从bundle.js中分离出来，以便在浏览器中以单独的文件加载。

以下是一个示例，演示如何在webpack中配置ExtractTextWebpackPlugin：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

在上面的配置中，我们使用ExtractTextWebpackPlugin插件将CSS提取到名为styles.css的文件中。

示例

我们来看一个具体的示例，演示如何使用webpack将CSS和JS分开生成。

首先，我们在项目根目录下创建一个名为webpack.config.js的文件，然后将以下代码添加到该文件中：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

接下来，我们在项目根目录下创建一个名为src的文件夹，并在其中创建一个名为index.js的文件，以及一个名为styles.css的CSS文件。

在index.js文件中，我们可以编写一些JavaScript代码：