【webpack系列】从零搭建 webpack4+react 脚手架（三）
本章节，我们对如何在脚手架中引入CSS，如何压缩CSS，如何使用CSS Modules，如何使用less，如何使用postcss等问题进行展开学习。
（1）在app目录，新建一个css，命名为index.css，输入样式：
h1{
display: flex;
height: 200px;
align-items: center;
justify-content: center;
color: #8FBC8F;
}
（2）在index.js中引入css
import './index.css'
（3）配置loader
在第一节，我们知道，webpack只能编译js文件，不能编译css，它不认识css文件，所以需要配置loader加载器来预处理。
首先安装style-loader和css-loader：
npm install --save-dev style-loader css-loader
（4）配置module.rules：
在webpack.prod.conf.js中配置：
module: {
rules:
[
{
test: /\.(css)$/,
use: [
'style-loader',
'css-loader',
]
}
]
},
loader的加载顺序是从右边到左边，css-loader是加载通过import引入的css文件，而style-loader的作用是把样式插入到DOM中。
最后，执行npm run build试试看样式是否生效。
npm run build
打开页面，发现样式已经生效了。打开控制台查看，你会发现css的确是通过style在页面上方插入的。
这里先提在webpack4版本以前一个插件，叫extract-text-webpack-plugin，熟悉webpack3的同学，可能知道，这个插件主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象。然而，在webpack4版本下，该插件已经不再兼容，官方提示我们去下载使用另外一个插件，叫mini-css-extract-plugin。
（1）安装mini-css-extract-plugin
npm install mini-css-extract-plugin --save-dev
（2）引入mini-css-extract-plugin
在webpack.prod.conf.js中引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
（3）修改配置loader
module: {
rules:
[
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
}
]
}
]
},
（4）配置plugin
//导出css
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[id].[hash].css',
}),
最后你的webpack.prod.conf.js看起来是这样
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(baseWebpackConfig, {
mode: 'production',
output: {
filename: "js/[name].[chunkhash:16].js",
},
module: {
rules:
[
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
inject: 'body',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
}),
new CleanWebpackPlugin(['../dist'], { allowExternal: true }),
//导出css
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[id].[hash].css',
}),
],
optimization: {
minimizer: [
new UglifyJSPlugin()
],
splitChunks: {
chunks: "all",
minChunks: ,
cacheGroups: {
framework: {
priority: ,
test: "framework",
name: "framework",
enforce: true,
reuseExistingChunk: true
},
vendor: {
priority: ,
test: /node_modules/,
name: "vendor",
enforce: true,
reuseExistingChunk: true
}
}
}
}
});
（5）编译build命令
npm run build
查看下dist目录，你会看到css已经被编译到css文件夹中，并且在html文件中成功引入。
（1）安装optimize-css-assets-webpack-plugin
npm install optimize-css-assets-webpack-plugin --save-dev
（2）引入optimize-css-assets-webpack-plugin
在webpack.prod.conf.js中引入optimize-css-assets-webpack-plugin ：
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
（3）配置minimizer参数
minimizer参数是配置在optimization参数内，和splitChunks同级。
minimizer: [
new UglifyJSPlugin(),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: true
? {
map: { inline: false }
}
: {}
})
],
（4）编译build命令
npm run build
再次查看dist/css目录下的css文件，你会发现已经是压缩后的了。
（1）配置css-loader参数
配置loader，传入的是数组，它的子项，可以是字符串，比如'css-loader',也可以是一个对象，支持其他参数的设置,设置loader为：
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:7]'
}
}
modules参数，定义是否开启css modules，默认是否。localIdentName定义生成class的名称格式，这样设置后，如果你定义了一个叫main的class，最后生成的是main__i72tywq这样的格式。
（2）试试看
修改index.js
import React from "react";
import ReactDom from "react-dom";
import indexStyle from './index.css'; ReactDom.render(
<h1 className={indexStyle.main}>hello, world!</h1>,
document.getElementById("root")
);
定义一个main的class
.main{
display: flex;
height: 200px;
align-items: center;
justify-content: center;
color: #8FBC8F;
}
（3）编译build命令
npm run build
在dist目录打开编译后的index.css文件，查看css，发现 class名称后都加了hash后缀，而且html中的引用也是加了后缀。
如何让它支持less，或者sass？webpack不认识less，需要配置loader。
（1）安装less-loader
npm install less less-loader --save-dev
（2）配置loader
在webpack.prod.conf.js中的module.rules内增加一个对象：
{
test: /\.(less)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:7]'
}
},
{
loader: 'less-loader'
}
]
}
（3）编译build命令
npm run build
在dist目录打开编译后的index.css文件，查看css，less文件成功被编译。引入sass也是类似。这里不再阐述。
你可以在使用预处理器的情况下使用它，也可以在原生的css中使用它。它都是支持的，并且它具备着一个庞大的生态系统，例如你可能常用的Autoprefixer，就是PostCSS的一个非常受欢迎的插件。
（1）安装postcss
npm install postcss postcss-loader --save-dev
（2）安装postcss某个插件，这里我用Autoprefixer举例
npm install autoprefixer --save-dev
（3）配置postcss.config.js
在根目录新建postcss.config.js
module.exports = () => ({
plugins: {
autoprefixer: { browsers: ['last 5 version', '>1%', 'ie >=8'] },
}
});
（4）设置loader
修改webpack.prod.conf.js中的中的module.rules
module: {
rules:
[
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: ,
modules: true,
localIdentName: '[local]__[hash:7]'
}
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.(less)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: ,
modules: true,
localIdentName: '[local]__[hash:7]'
}
},
{
loader: 'postcss-loader'
},
{
loader: 'less-loader'
}
]
}
]
},
（4）编译build命令
npm run build
看下编译生成的css文件，查看代码，已经自动加了浏览器前缀。
最后你可以把webpack.prod.conf.js内关于module rules的设置拷贝到webpack.dev.conf.js,修改第一个为style-loader
module: {
rules:
[
{
test: /\.(css)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: ,
modules: true,
localIdentName: '[local]__[hash:7]'
}
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.(less)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: ,
modules: true,
localIdentName: '[local]__[hash:7]'
}
},
{
loader: 'postcss-loader'
},
{
loader: 'less-loader'
}
]
}
]
},
你可以执行 npm run dev来启动开发环境。
【webpack系列】从零搭建 webpack4+react 脚手架（三）的更多相关文章
- 【webpack系列】从零搭建 webpack4+react 脚手架（一）
搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（四）
经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（二）
html文件如何也同步到dist目录?bundle.js文件修改了,万一被浏览器缓存了怎么办?如何为导出的文件加md5?如何把js引用自动添加到html?非业务代码和业务代码如何分开打包?如何搭建开发 ...
- 【webpack系列】从零搭建 webpack4+react 脚手架（五）
本章节,我们一起来探讨以下问题:如何对编译后的文件进行gzip压缩,如何让开发环境的控制台输出更加高逼格,如何更好的对编译后的文件进行bundle分析等. 1 gzip压缩 如果你想节省带宽提高网站速 ...
- 从零搭建Spring Boot脚手架（1）：开篇以及技术选型
1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 从零搭建Spring Boot脚手架（2）：增加通用的功能
1. 前言 今天开始搭建我们的kono Spring Boot脚手架,首先会集成Spring MVC并进行定制化以满足日常开发的需要,我们先做一些刚性的需求定制,后续再补充细节.如果你看了本文有什么问 ...
- 从零搭建Spring Boot脚手架（3）：集成mybatis
1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文集成了一些基础的功能,比如统一返回体.统一异常处理.快速类型转换.参数校验等常用必备功能,并编写了一些单元测试进行验证,今天 ...
- 从零搭建Spring Boot脚手架（4）：手写Mybatis通用Mapper
1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文把国内最流行的ORM框架Mybatis也集成了进去.但是很多时候我们希望有一些开箱即用的通用Mapper来简化我们的开发.我 ...
随机推荐
- 哈尔滨工程大学第十四届程序设计竞赛（同步赛）F 小帆帆走迷宫(dp)
题目描述 小帆帆被困在一个 NxN 的方格矩阵迷宫,每个格子中都有一个整数 A[i][j].小帆帆从迷宫起点(左上角)格子 A[1][1]开始走,每一步可以向右或向下移动,目标是移动到迷宫的出口右下角 ...
- Mysql 查询当月时间数据
SELECTDATE_FORMAT(CURDATE(), '%Y%m'), DATE_FORMAT(t.transactiontime, '%Y%m'),t.*FROM ttransactions t ...
- Jmeter接口测试操作
一.Jmeter接口测试操作步骤 1. 启动jmeter,右键点击测试计划-->添加-->Threads(Users)-->线程组,点击线程组菜单,右边显示参数设置. 2 . 右键点 ...
- 2018-2019 20165232 Exp5 MSF基础应用
2018-2019 20165232 Exp5 MSF基础应用 一.原理与实践说明 1.实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个 ...
- 深悉正则(pcre)最大回溯/递归限制
对于如下的正则 /<script>.*?<\/script>/is 当要匹配的字符串长度大于100014的时候, 就不会得出正确结果: $reg = "/<sc ...
- css中自定义字体
css代码如下: @font-face { font-family: 'HelveticaNeueLTPro-Th'; src: url('../fonts/HelveticaNeueLTPro-Th ...
- Precision 7520双硬盘无法识别固态硬盘
将RAID ON 修改为AHCI,如图1,会使得 win10无法 启动,如图2 图 1 图 2 可以开legacy,如图3,让电脑可以从u盘启动,如图4,但是也无法查看到固态硬盘 图 3 图 4 网上 ...
- VMware Workstation 常见问题解决
本文以FAQ的方式进行整理,大家可以根据关键字进行查找即可. 问题一:VMware 安装64位操作系统报错“此主机支持Intel VT-x, 但Intel VT-x处于禁用状态” 问题二:This v ...
- PowerPoint 中插入 Latex 公式
做 PPT 用 Latex Beamer 毕竟还是太麻烦,Beamer 毕竟还是更适合学术性的,各种定义各种公式的那种,遇到要画各种图,插入各种图片,进行错综复杂的排版就比较棘手了. 最终还是 Pow ...
- MyRolan (快速启动小工具)
类似 Rolan的快速启动工具. 启动后隐藏,当鼠标移至左上角时,窗口显示,点击项目可运行程序. GitHub地址: MyRolan . #if defined(UNICODE) && ...