Webpack2 上配置 React，CSS 外置方案

2017-03-27

编码 f2e

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

前言

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

正文

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

CSS 嵌入 JS 中（移植性更好）
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

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

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

修改后的 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，在此基础上只差两步：

安装 Sass 所需的 NodeJS 模块
设置 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']
  })
}

其余部分不变即可。