loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
处理css文件
在webpack.config.js中进行loader的配置
const { join } = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'index.js', // 输出文件名
path: join(__dirname, 'dist'), // 输出文件的路径
},
module: {
rules: [{
test: /\.css$/, // 文件名以.css为结尾的文件
use: [
'style-loader',
'css-loader',
],
}],
},
mode: "development", // 当前打包环境为development
loader配置好后，需要安装style-loader, css-loader的依赖
npm i style-loader css-loader -D
执行命令
npm run build:dev
打包成功
可以看到输出的dist/index.js已经将index.css文件处理成功了。
这里说一下，在webpack打包应用loader配置的时候，先去用css-loader处理成commonjs模块（样式字符串）加载到js中，再到style-loader处理，创建style标签，将js中的样式资源插入进去，添加到head中生效。
loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
生成dist/index.js后，我们可以验证一下写的css文件又没有生效。在dist文件夹下，新建index.html，并引入打包生成index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>
在本地打开index.html
可以看到我们写的css样式已经生效了。
处理less文件
src下新建一个less文件
touch index.less
内容为
#box1 {
height: 100px;
width: 100px;
background: black;
#title {
color: white;
}
}
在index.js中引用less文件
import './index.less';
安装less-loader
npm i less-loader -D
修改webpack.config.js的配置项
const { join } = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'index.js', // 输出文件名
path: join(__dirname, 'dist'), // 输出文件的路径
},
module: {
rules: [{
test: /\.css$/, // 文件名以.css为结尾的文件
use: [
'style-loader',
'css-loader',
],
}, {
test: /\.less$/, // 文件名以.css为结尾的文件
use: [
'style-loader',
'css-loader',
'less-loader',
],
}],
},
mode: "development", // 当前打包环境为development
执行webpack打包命令
npm run build:dev
执行命令之后报错，本地依赖中没有less的依赖，需要安装less
npm install less -D
重新执行webpack打包命令，打包成功
打包成功
在dist/index.html中修改标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<div id="title">webpack</div>
</div>
</body>
<script src="./index.js"></script>
</html>
本地打开
less样式生效，可以看看控制台的Element样式信息
index.less 与 index.css两个文件分别在head中生成了两个style。less-loader将less文件处理成css语法，然后再通过css-loader与style-loader进行css文件的处理，实现上述所说的链式调用。
MiniCssExtractPlugin 单独抽出css文件
我们经过上面几步处理，css文件会输出在js文件中。且输出的js文件加载在整个html的头部。既然css输出同样可以渲染页面，我们为什么要单独将css文件提取出来呢？
在浏览器去解析html的时候，遇到script标签，会暂停构建DOM，将控制权交给javascript引擎去解析js，等javascript引擎结束以后，浏览器才会从中断构建DOM的地方重新构建DOM。如果执行js的速度过慢，导致DOM已经渲染在页面上，但样式却没有渲染上，js解析完毕后样式渲染上以后，就会导致用户体验不好。所以我们通常，会将css文件单独分离，放在html的头部，而js文件放在整个html的后面。
现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的HTMl元素解析之后在构建和布局dom树，所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。
而javascript可能会改变DOM tree的结构，所以需要一个稳定的DOM tree。
javascript加载后会立即执行，同时会阻塞后面的资源加载。
安装 MiniCssExtractPlugin的插件
npm install mini-css-extract-plugin -D
修改webpack.config.js, 由于style-loader是将css处理成style标签放在head里，所以我们用插件替代该loader， 相关配置如下：
const { join } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...,
module: {
rules: [{
test: /\.css$/, // 文件名以.css为结尾的文件
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
}, {
test: /\.less$/, // 文件名以.css为结尾的文件
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
}],
},
mode: "development", // 当前打包环境为development
plugins: [
...,
new MiniCssExtractPlugin(),
],
}
执行 yarn build:dev，可以看到输出了main.css
css兼容性 postcss-loader
一些css属性的兼容性不是很高，为了方便在写css的时候不考虑属性的兼容性问题，我们可以采用postcss-loader去解决这个问题。
先安装两个依赖postcss-loader和postcss-preset-env, 其中postcss-preset-env 允许开发者使用最新的 CSS 语法而不用担心浏览器兼容性。postcss-preset-env 会将最新的 CSS 语法转换为目标环境的浏览器能够理解的 CSS 语法。
npm install postcss-loader postcss-preset-env -D
修改webpack.config.js的配置
module.exports = {
...,
module: {
rules: [
...
{
test: /\.css$/, // 文件名以.css为结尾的文件
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
],
],
},
},
}
],
}
],
},
}
修改package.json, "development" 和 "production" 是指node的环境process.env.NODE_ENV，区别于mode。当中的配置可以参考browserslist的github。
{
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}
css文件夹中添加一个需要兼容的css属性
执行 yarn build:dev， 查看dist文件夹中分离出的css文件
压缩css
下载插件 optimize-css-assets-webpack-plugin
npm install -D optimize-css-assets-webpack-plugin
修改webpack.config.js的配置
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
...
plugins: [
...,
new OptimizeCssAssetsWebpackPlugin(),
],
}
执行yarn build:dev , css文件被压缩成一行
