Webpack2 上配置 React,CSS 外置方案
这篇介绍 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']
})
}
其余部分不变即可。
扩展 PostCSS
关于 PostCSS 的扩展方式和 Sass 类似,不过要额外在根目录下增加配置文件 postcss.config.js
,这是由于 PostCSS 的机制是一个插件平台,分离出来更有利。
详细的配置方式,可以参考我另一篇文章 Webpack2 构建 PostCSS
参考资料
如果您觉得内容对您的学习有所帮助,您可以请我喝咖啡~ (不喝无名的咖啡,请告诉我你是谁)
(手机微信下可以长按左图二维码,选择“识别二维码”输入金额)