这次我们来处理一下 解析 css/sass 的需求
首先需要两个 loader
yarn add style-loader css-loader --dev
css-loader 作用是使你能够使用类似 @import 和 url(...) 的方法实现 require 的功能
style-loader 会生成一个内容为最终解析完的 css 代码的 style 标签，放到head标签里
简单来讲, css-loader 加载 css 文件, style-loader 使用 <style> 将 css-loader 内部样式注入到我们的 HTML 页面
修改 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
})
]
};
也注意一下, use 里面所使用的 loader 执行顺序是从右往左, 所以这里我们会先用 css-loader 解析 css 文件, 然后再用 style-loader 把解析后的 css 文件注入到 html 中
新建一个 ./src/index.css 文件
#app {
color: red;
}
修改 app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
+ import './index.css'
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
到了这一步实际就完成了 css 的解析, 但是这里有个很大的问题
我们看下 css 被解析成了什么 (在 dist/app.js 里)
.push([e.i,"#app {\r\n color: red;\r\n}\r\n",""])}
上面这段我们可以看出来, css 被解析成了一段 js 然后直接做了一个 push 的动作
依据页面的加载顺序, 这段 css 其实会等所有的 js 都执行完才会进行渲染, 在实际的表现中我们的页面会有一个白屏或是无样式期, 然后才渲染成最后我们所期望的表象, 这很明显不是我们所期望的结果
处理这个问题, 首先需要这个插件
yarn add extract-text-webpack-plugin --dev
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 index.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
修改一下 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
+ use: ExtractTextPlugin.extract({
+ fallback: "style-loader",
+ use: "css-loader"
+ })
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
+ new ExtractTextPlugin("index.css"),
]
};
use 里的修改看起来奇怪, 但是作用还是先执行 css-loader 再执行 style-loader
plugins 里我们构造 ExtractTextPlugin 实例的时候传入了 index.css 作为参数, 作用是指定打包后的 css bundle 名
然后可以重新指令运行了
node_modules./bin/webpack
但是这里可能会报错
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get(...)
解决方案是
yarn add extract-text-webpack-plugin@next --dev
这个问题是因为 extract-text-webpack-plugin 目前还没有 webpack4 版本
有兴趣可以去这个网址看看 有一些有意思的讨论 https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701
重新指令运行打包以后 dist 文件夹里就会出现 index.css 文件了, 我们在 index.html 里也会看到 style 标签引入了这个 css 文件
css 就搞定了 接着是 sass (less 我就不写了 没啥区别)
安装
yarn add sass-loader node-sass --dev
node-sass 是一定要装的, 它是 sass-loader 的依赖
但是 node-sass 二进制文件的下载源在墙外, 所以你可能需要翻墙 或者换 yarn 的下载源等等方法 这里不细写了
修改 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
+ {
+ test: /\.scss$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'sass-loader']
+ })
+ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
new ExtractTextPlugin("index.css"),
]
};
修改 app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
+ import './index.scss';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
新增 ./src/index.scss
body {
background-color: black;
#app {
font-size: 30px;
}
}
然后打包 你会看到 src/index.scss 和 src/index.css 的内容都被解析后丢进了 dist/index.css 文件里
完
接着处理下 图片和字体
