nature book bug burger costumes doctors hospital office shoes skull rocket

Webpack2 上配置 React,CSS 外置方案

这篇介绍 webpack2 中的 React 采用的 CSS 外置方案,就是把 CSS 从 JS 中独立抽离出来

前言

本文不再赘述 webpack 基础配置,主要增对 Webpack2 上配置 React + ES2015 这篇文章做延伸,在此之上再配置 CSS。

正文

总所周知,webpack 会把所有资源统一加载,CSS 则会被转为 JS 的一部分。故而有两种主要的 CSS 配置方案:

  1. CSS 嵌入 JS 中(移植性更好)
  2. CSS 从 JS 中独立抽离出来(更符合 CSSer 习惯)

小编尝试过两种做法,很难说哪种更好,可能结合业务逻辑探讨更有价值。本文将介绍 第2 种配置方法,可能更加适合 Web APP 的做法,同时更符合 CSSer 习惯。

安装模块

为了采用 CSS 外置方案,有三个模块是必须的:

{
  "css-loader": "^0.27.3", // 让 CSS 能够被 JS 认识
  "style-loader": "^0.16.0",  // 把 CSS 装载到 JS 里
  "extract-text-webpack-plugin": "^2.1.0",  // 把 CSS 从 JS 中独立抽离出来使用
}

请用 npm 安装着 3个 模块。

配置 webpack

在之前的配置基础上,主要加三个地方:

  1. 引入 ‘extract-text-webpack-plugin’ 模块
  2. 修改 css 文件加载器设置,用 ‘extract-text-webpack-plugin’ 模块的 extract(提取) 方法设置加载器
  3. 配置插件选项,设置存储后的使用路径

修改后的 webpack.config.js 内容如下:

// webpack.config.js

const path = require('path');
const webpack = require('webpack');

//把 css 从 js 中独立抽离出来
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  // 程序入口.
  entry: ['./src/index.js'],
  // 输出配置,包含额外选项.
  output: {
    // 输出文件.
    filename: 'bundle.js',
    // 输出路径.
    path: path.resolve(__dirname, 'dist')
  },
  // webpack 的主目录.
  context: __dirname,
  // webpack-dev-server 配置选项
  devServer: {
    // 静态文件位置
    contentBase: path.join(__dirname, 'public'),
  },
  devtool: 'source-map',
  // 这些选项确定如何处理项目中不同类型的模块
  module: {
    rules: [
      // 配置 js 后缀的文件,应该采用哪种加载器.
      {
        test: /\.js$/,
        use: [{ loader: 'babel-loader' }],
        exclude: /node_modules/,
      },
      // 配置 css 后缀的文件,应该采用哪种加载器.
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader']
        })
      }
    ]
  },
  // 配置插件(插件以各种方式定制 webpack 构建过程)
  plugins: [
    // 设置存储后的使用路径.
    new ExtractTextPlugin('global.css')
  ]
};

// 模块导出
module.exports = config;

如何使用

由于我们前面配置过 ES6,所以 CSS 可以直接导入了。比如我们这样修改入口文件:

// src/index.js

// 导入 react 核心库.
import React from 'react';
// 导入 react DOM 库.
import ReactDOM from 'react-dom';
// 导入全局样式文件.
import './css/global.css';

// 在 #root 显示 hello world.
ReactDOM.render(
  <h1 className="my-title">Hello World!</h1>,
  document.getElementById('root')
);

目前为止,我们已经完成了 CSS外置 的配置方案,可以痛快的编码了,祝大家编码愉快~

扩展 SCSS

如要使用 Sass,在此基础上只差两步:

  1. 安装 Sass 所需的 NodeJS 模块
  2. 设置 scss 文件加载器,并且使用 Sass
安装模块
{
  "node-sass": "^4.5.1",  // sass的核心功能模块.
  "sass-loader": "^6.0.3",  // sass的加载器实现.
}
修改配置

webpack.config.js 文件中,修改 module 部分。把其中的 css 加载器修改一下。

原来是这样:

// 配置 css 后缀的文件,应该采用哪种加载器.
{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader']
  })
}

改成下面这样:

// 配置 scss 后缀的文件,应该采用哪种加载器.
{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
}

其余部分不变即可。

扩展 PostCSS

关于 PostCSS 的扩展方式和 Sass 类似,不过要额外在根目录下增加配置文件 postcss.config.js,这是由于 PostCSS 的机制是一个插件平台,分离出来更有利。

详细的配置方式,可以参考我另一篇文章 Webpack2 构建 PostCSS

参考资料