webpack的loader加载器
源码上传地址：链接: https://pan.baidu.com/s/1ihZuEGL62VcKy79-zE5pHQ 提取码: ique
webpack的loader是个加载器，其实是用来解析文件的。
首先，我在src目录下，先创建一个css文件。
index.css
div{
background:red;
}
然后将index.css引入到index.js当中
import "./index.css"
这个时候，如果我们执行打包命令，肯定是会报错的，因为webpack里面没有加载器，所以识别不了。
所以，要安装一个解析css的加载器:
css-loader:用来解析css
style-loader:把我们解析的css放在style标签中
执行命令: npm install css-loader style-loader -D
安装完毕后，我们去webpack.config.js进行手动配置加载器。
加载器的配置是在module下进行的:
module:{
//这里注意，加载顺寻是从上到下加载，所以加载顺序要清楚。
//一定是先解析css，然后再往style里面放
//enforce:'post' pre优先加载, post最后加载，这个参数可以控制加载顺序
rules:[
{
test:/\.css$/i, //匹配后缀为css的文件
user:'css-loader' //用什么加载器
},
{
test:/\.css$/i, //匹配后缀为css的文件
user:'style-loader', //用什么加载器
enforce:'post' //pre优先加载, post最后加载
},
]
}
这里，还有一种简写方式，可以把它们写在一起， 保持界面的整洁:
rules: [
{
test: /\.css$/i, //匹配后缀为css的文件
use: ['style-loader', 'css-loader'], //用什么加载器,这里的加载顺序是从右向左依次加载，所以注意顺序
},
],
配置完毕后，直接运行之前安装的本地服务或者打包预览，看页面的样式有没有变化即可。
我这里可直接运行本地服务，如没有本地服务，可以查看上篇文章。
执行命令: npm run devServer
图片上可以看到css样式已经起作用了。
还有几种比较常见的css预处理器:
解析less: less less-loader
通过命令安装: npm install less less-loader -D
src目录下，创建less文件
@color:'blue'
div{
color:@color
}
在index.js引入
需要的插件包已经安装完成，只需要在webpack.config.js下面的module进行如下配置即可:
{
test: /\.less$/i,
use: ['style-loader', 'css-loader','less-loader'],
},
因为配置的是css，所以一定要加载全。
进行预览即可
这里有一个发散的点，就是，如果在css文件里面引入less的文件，或者其他文件，就需要重新配置一下css的预加载器。
注:因我们的最先的流程都是通过js引入的，下面看如果现在css 引入该怎么配置。
{
test: /\.css$/i,
use: ['style-loader', {
loader:"css-loader",
options:{
importLoaders:1 //用后面的1个加载器来解析
}
},'less-loader'
],
},
解析sass: node-sass sass-loader
解析stylus stylus stylus-loader
额外扩展css处理:
如果我们的样式，里面用到了css3的语法，我们就不得不考虑浏览器的兼容问题。
因此，我们就要处理一下css私有前缀问题。
postcss-loader 借助插件样式处理工具
autoprefixer:处理私有前缀的插件
通过命令安装: npm install postcss-loader autoprefixer -D
安装成功以后，会调用postcss.config.js这个js
没有这个文件，就需要我们在src目录下新建一下。
postcss.config.js 这个文件里可以定义css私有前缀的一些插件
module.exports={ //设置处理样式的配置文件。
plugin:[
require:('autoprefixer')
]
}
同时webpack.config.js 需要更改下rules里面对于css预处理器的配置
{
test: /\.css$/i,
use: ['style-loader', {
loader:"css-loader",
options:{
importLoaders:2 //用后面的2个加载器来解析
}
},'postcss-loader','less-loader'//css处理需要postcss-loader处理一下,添加一个私有前缀
],
},
这个时候先不要着急打包，为了兼容更多浏览器，我们还需要一个配置
首先 根目录下新建一个文件: .browserslistrc
// .browserslistrc
cover 99.5% //覆盖99.5%的浏览，这样才会兼容大多数浏览器。
然后再次执行打包命令
npm run dev
这个时候私有前缀就添加成功了。不过这个时候打包后的css和js是再一起。
要分离css还需要一个插件。
mini-css-extract-plugin
通过命令安装一下：
npm install mini-css-extract-plugin -D
webpack.config.js文件下引入:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
同时再 pligins 下设置:
new MiniCssExtractPlugin({ //需要设置分离出来的css的位置
filename:"css/main.css" //分离出来存放的目录
}),
紧接着我们还要设置一下module，如下:
{
test: /\.css$/i,
use: [
{
loader:MiniCssExtractPlugin.loader //分离css以后，就会通过外链的方式引入页面，所以之前的'style-loader'就不需要了。
},
{
loader:"css-loader",
options:{
importLoaders:2 //用后面的2个加载器来解析
}
},'postcss-loader','less-loader' //css处理需要postcss-loader处理一下,添加一个私有前缀
],
}
这个时候，执行打包命令 就可以看到。dist目录下，分离成功了。
至此，我们的css和js打包分离就成功了。但是我们的项目一般上线之前，都是需要压缩的。
这也是webpack的主要作用，下面来看如何进行代码的压缩。
这个时候，我们直接通过打包命令:npm run build
打包到生产环境，其实是可以打包的。但是，只能打包js ，css是没有被压缩的。
所以压缩css我们还需要引入一个插件:
npm install optimize-css-assets-webpack-plugin -D
webpack.config.js 引入
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css
同时module.exports下面新建一个属性:
optimization:{
minimizer:[ //放压缩的css,或者js
new OptimizeCssAssetsPlugin()
]
}
然后我们执行命令打包:npm run build
我们会发现。css压缩成功，但是js反而不压缩了。这是因为js有一个它自定的覆盖压缩插件:terser-webpack-plugin
下面我们来安装一下:
npm install terser-webpack-plugin //(这里注意压缩的插件是放在生产环境下的。所以命令后面不要加-D)
因此我们同样需要配置一下:webpack.config.js
先引入：
const TerserPlugin = require('terser-webpack-plugin');//压缩js
同样再optimization属性配置里，调用下方法就可以了。
optimization:{
minimizer:[ //放压缩的css,或者js
new OptimizeCssAssetsPlugin(),
new TerserPlugin()
]
}
执行打包命令：npm run build
打包成功以后就可以看到我们的css和js都被压缩了。
源码地址：链接: https://pan.baidu.com/s/1ihZuEGL62VcKy79-zE5pHQ 提取码: ique
