前端基础之《React（5）—webpack简介-集成CSS和SASS支持》
接上篇......
十三、集成CSS和SASS支持
1、建一个css文件
assets/app.css
html, body {padding: 0;margin: 0;background-color: #f5f5f5;
}2、安装loader（先处理CSS文件）
cnpm i style-loader -D
cnpm i css-loader -D3、配置module.rules
修改config.js
// 两个环境都需要的公共配置// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack') // webpack自带插件module.exports = {entry: {// 把第三方库打包到vendors.js中，从业务代码中抽离出来，为了以后部署时做CDN优化vendors: ['react', 'react-dom/client'],// 可以给入口文件取个名字，给output使用app: {// 用import引入main.js作为入口文件import: path.resolve(__dirname, '../', 'src/main.js'),dependOn: 'vendors' // 用dependOn指定业务代码app依赖于vendors，先打包vendors，再打包app}},// 出口output: {// 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径path: path.resolve(__dirname, '../', 'dist'),// 指定打包结果的JS名称规范// filename: 'bundle.js' // 量词，一捆、一束filename: 'js/[name].[chunkhash:8].js',// 每次build打包时，都自动先删除dist中的旧文件clean: true},// 插件// 所有webpack插件都是class，用的时候需要newplugins: [// 用于把JS脚本和index.html自动注入合并new HtmlWebpackPlugin({template: path.resolve(__dirname, '../', 'public/index.html'),inject: 'body', // 把JS注入到body结束标签前面filename: 'index.html', // 指定打包成功后这个模板叫什么名字title: '测试'}),// 添加编译进度条new ProgressPlugin({handler(percentage, message, ...args) {console.log(percentage, message, ...args)}}),// 从node_modules中加载react包，将其放在全局变量React中，这样之后所有的文件模块都可以直接访问new ProvidePlugin({React: 'react'}),],// 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件module: {// 定义模块编译的规则和方式rules: [{test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾use: ['babel-loader'], // 使用babel编译器把ES6+的代码编译成ES5exclude: /node_modules/, // 排除node_modules目录下的第三方包文件},{test: /\.(css)$/,use: ['style-loader', 'css-loader'], // 多个loader从右向左执行exclude: /node_modules/,}]}
}
{
test: /\.(css)$/,
use: ['style-loader', 'css-loader'], // 从右向左执行
exclude: /node_modules/,
}
webpack工作时，遇到以.css结尾的模块时，先用css-loader加载并解析返回css代码，接着由style-loader把css代码插入到head标签中
4、把项目运行起来查看
5、打包把CSS抽离出来
把配置从config.js中移出来
修改serve.js
// 只有开发环境才需要用到配置
module.exports = {mode: 'development',devtool: 'inline-source-map',// 本地服务配置devServer: {port: 8000},module: {rules: [{test: /\.(css)$/,use: ['style-loader', 'css-loader'], // 从右向左执行exclude: /node_modules/,}]}
}
修改build.js
// 只有打包时才用到配置
module.exports = {mode: 'production',devtool: 'source-map',module: {rules: [{test: /\.(css)$/,use: ['style-loader', 'css-loader'], // 从右向左执行exclude: /node_modules/,}]}
}
安装插件：
cnpm i mini-css-extract-plugin -D修改build.js
// 只有打包时才用到配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {mode: 'production',devtool: 'source-map',plugins: [new MiniCssExtractPlugin()],module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader"],exclude: /node_modules/},]}
}
这样子的话，起本地服务，css包含在app中。build打包，css会分离出来
6、为MiniCssExtractPlugin插件增加选项
修改build.js
// 只有打包时才用到配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {mode: 'production',devtool: 'source-map',plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',})],module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader"],exclude: /node_modules/},]}
}
css文件放入单独的目录，解决浏览器缓存刷新问题
7、集成SASS
cnpm i sass-loader sass -D修改serve.js
// 只有开发环境才需要用到配置
module.exports = {mode: 'development',devtool: 'inline-source-map',// 本地服务配置devServer: {port: 8000},module: {rules: [{test: /\.(css|scss)$/i,use: ['style-loader', 'css-loader', 'sass-loader'], // 从右向左执行exclude: /node_modules/,}]}
}
修改build.js
// 只有打包时才用到配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {mode: 'production',devtool: 'source-map',plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',})],module: {rules: [{test: /\.(css|scss)$/i,use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],exclude: /node_modules/}]}
}
修改app.css，改名app.scss
$c: blue;html, body {padding: 0;margin: 0;background-color: #f5f5f5;color: $c;
}遇到以.scss结尾的模块时，先使用sass-loader加载模块，并交给sass编译器进行编译，编译结果得到css模块，再使用css-loader
注意：当处理一种文件模块，需要多个loaders时，先工作的loader放在数组的后面