How to manage CSS and other resources in webpack and SPA

This article mainly introduces the methods of managing CSS and other resources in webpack and SPA practice. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

The previous article introduced how to use webpack to build a stable development environment that supports local services, automatic refresh, module hot replacement, and writing JavaScript using ES6. This article mainly introduces webpack. How to handle another element of the three major elements of HTML applications - CSS and other resources such as images, font files or data configuration files.

Preface

When learning to use webpack, we need to understand that no matter how it is designed, what its working principle and process are, the most fundamental thing it processes is HTML. HTML tags, JavaScript, CSS, images and other resources in the document, and the final processing result must still be an HTML document, including DOM, JavaScript, CSS. There are three ways for CSS to exist in the document: inline style, inline The use of styles, external link styles, and inline styles has long been deprecated, so there are only two ways for webpack to process CSS:

1. ##Inline style: Use the
2. External link styles: Package and generate CSS files, introduce styles through tags;

webpack With CSS

, we know that webpack can only process JavaScript. For other resources, loaders and plug-ins need to be used to process them into JavaScript modules, and then perform module dependency management. Webpack provides two loaders, style-loader and css-loader, to support our modular CSS, so it can be introduced directly in other modules.

Installation

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

Configuration

Add the following configuration in the module loader option of the webpack configuration file:

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

Of course, in order to facilitate the use of reference paths, you can also configure path fragment aliases:

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

At this time,

import 'styles/index.css'; is equivalent to using a relative path, such as import '../src/styles/indx.css';

Use

After configuring, if we create it in the styles directory An index.css file has been created, and now the CSS can be introduced directly into the JavaScript file: import 'styles/index.css'; or require('styles/index.css');

The css content is as follows:

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

The page is displayed as shown in the figure:

Inline style

As mentioned earlier, the way webpack handles CSS is There are two types. The first one is to dynamically insert the

The above is the detailed content of How to manage CSS and other resources in webpack and SPA. For more information, please follow other related articles on the PHP Chinese website!