详解webpack和webpack-simple中如何引入css文件

webpack是一个常用的现代化JavaScript应用程序打包工具，而webpack-simple是webpack的官方脚手架。下面我们将详细讲解在webpack和webpack-simple中如何引入css文件。

在webpack中引入css文件

安装依赖

首先需要安装用于处理css的依赖包css-loader和style-loader。可以使用以下命令进行安装：

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

添加配置

在webpack的配置文件中添加如下配置：

module.exports = {
  // 省略其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

上述配置会使用css-loader加载css文件，然后使用style-loader将样式添加到页面中。注意，use数组中的loader顺序是从右往左依次执行。

引入css

在需要引入css的文件中，使用import语句将css文件引入：

import './style.css';

示例说明

1. 首先，在项目中创建一个名为style.css的css文件，其内容如下：

body {
  background-color: yellow;
}

1. 在项目中创建一个名为index.js的JavaScript文件，其内容如下：

import './style.css';

function createContent() {
  const ele = document.createElement('div');
  ele.innerText = 'Hello, webpack!';
  return ele;
}

document.body.appendChild(createContent());

1. 在项目根目录下创建webpack配置文件webpack.config.js，添加如下配置：

const path = require('path');

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

1. 执行webpack命令进行打包：

npx webpack

1. 在浏览器中打开dist目录下的index.html文件，可以看到页面的背景色为黄色，说明css文件已经成功引入并生效。

在webpack-simple中引入css文件

webpack-simple是webpack官方提供的脚手架工具，可以快速创建一个webpack项目。下面将详细讲解如何在webpack-simple项目中引入css文件。

创建项目

首先需要使用webpack-simple创建一个项目。可以使用以下命令创建一个名为my-project的项目：

vue init webpack-simple my-project

创建完成后，进入项目目录并安装依赖：

cd my-project
npm install

安装依赖

同样需要安装用于处理css的依赖包css-loader和style-loader。可以使用以下命令进行安装：

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

添加配置

在webpack配置文件build/webpack.base.conf.js中，添加以下配置：

module.exports = {
  // 省略其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

引入css

在需要引入css的文件中，使用import语句将css文件引入：

import './style.css';

示例说明

1. 首先，在项目中创建一个名为style.css的css文件，其内容如下：

body {
  background-color: yellow;
}

1. 在项目中的App.vue文件中引入上述样式：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style>
  /* 引入外部样式，注意路径 */
  @import './style.css';

  h1 {
    color: green;
  }
</style>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    };
  },
};
</script>

1. 修改build/webpack.base.conf.js：

const path = require('path');

module.exports = {
  // 省略其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

1. 执行npm run dev命令，启动本地开发服务器：

npm run dev

1. 在浏览器中访问http://localhost:8080，可以看到页面的背景色为黄色，说明css文件已经成功引入并生效。