webpack与SPA实践之管理CSS等资源的方法

日期：2020-05-11 栏目：程序人生浏览：次

上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务、自动刷新、模块热替换、使用ES6编写JavaScript的开发环境，本篇主要介绍webpack如何处理HTML应用三大元素的另一元素 – CSS及其他诸如图片、字体文件或者数据配置文件等资源。

前言

在学习使用webpack时，我们需要明白无论它怎么设计，它的工作原理、流程是什么，最根本的它处理的还是HTML文档中的HTML标签、JavaScript、CSS、图片等资源，而且最终的处理结果依然必须是一个HTML文档，包括DOM、JavaScript、CSS，而CSS在文档中的存在方式，有三种：行内样式，内联样式，外链样式，行内样式使用方式早已不推荐，所以webpack处理CSS方式也就两种：

内联样式：以<style>标签方式在HTML文档中嵌入样式；
外链样式：打包生成CSS文件，通过<link>标签引入样式；

webpack与CSS

我们知道，webpack本质是只能处理JavaScript的，而对于其他资源，需要使用加载器和插件将其处理成JavaScript模块，然后进行模块依赖管理。webpack提供style-loader和css-loader两个加载器支持我们模块化CSS，因此可以在其他模块内直接引入。

安装

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

配置

在webpack配置文件的模块加载器选项中添加如下配置：

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }

当然为了方便使用引用路径，还可以配置路径片段别名：

  alias: {
    styles: path.resolve(__dirname, 'src/styles/')
  }

此时，import 'styles/index.css';等同于使用相对路径，如import '../src/styles/indx.css';

使用

配置好以后，假如我们在styles目录下创建了一个index.css文件，现在可以在JavaScript文件中直接引入该CSS: import 'styles/index.css'; 或 require('styles/index.css');

css内容如下：

  html, body {
    width: 100%;
    height: 100%;
  }
  .container {
    color: red;
  }

页面展示如图：

内联样式

前面提到了webpack处理CSS的方式有两种，第一种是以内联方式在页面<head>标签内动态插入<style>内联样式，这种方式也是webpack的默认处理方式，只需要简单配置如下加载器：

转载注明出处：https://www.heiqu.com/44.html

webpack与SPA实践之管理CSS等资源的方法

相关推荐