webpack4.0 入门实践教程(5)

日期：2020-05-11 栏目：程序人生浏览：次

我们在写 css 时不免要考虑到浏览器兼容问题，如 transform 属性，需要添加浏览器前缀以适配其他浏览器。故使用到 postcss-loader 这个 loader，下面则是相关的配置

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 // ...
 module: {
 rules: [
 {
 test: /\.css$/,
 include: [path.resolve(__dirname, 'src')],
 use: [
 MiniCssExtractPlugin.loader,
 'css-loader',
 {
 loader: 'postcss-loader',
 options: {
 plugins: [require('autoprefixer')]
 }
 }
 ]
 }
 ]
 },
 plugins: [
 //...
 new MiniCssExtractPlugin({
 filename: '[name].css',
 chunkFilename: '[id].css'
 })
 ]
}

打包 less 文件

开发中通常会用到一门预处理语言，这里以 less 为例，通过 less-loader 可以打包 less 为 css 文件

npm install less less-loader -D

新建 src/assets/style/index.less , 并且在 src/index.js 中引入 import './assets/style/index.less'

配置 webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 module: {
 rules: [
 // ...
 {
 test: /\.less$/,
 use: [
 MiniCssExtractPlugin.loader,
 'css-loader',
 {
 loader: 'postcss-loader',
 options: {
 plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
 }
 },
 'less-loader'
 ]
 }
 ]
 }
 //...
}

执打包命令后就可以发现 index.less 中写的样式会和 color.css 一样被打包进 main.css 中。

webpack@v4 升级踩坑: 关于使用 mini-css-extract-plugin 的注意点。

打包图片

npm install file-loader url-loader -D

file-loader:可以用于处理很多类型的文件，它的主要作用是直接输出文件，把构建后的文件路径返回。

url-loader:如果图片较多，会发很多 http 请求，会降低页面性能。 url-loader 会将引入的图片编码，生成 dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此 url-loader 提供了一个 limit 参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 进行 copy。

url-loader 可以看作是增强版的 file-loader。
url-loader 把图片编码成 base64 格式写进页面，从而减少服务器请求。

module.exports = {
 module: {
 rules: [
 // ...
 {
 test: /\.(png|jpg|gif)$/,
 use: [
 {
 loader: 'url-loader',
 options: {
 outputPath: 'images/', //输出到images文件夹
 limit: 500 //是把小于500B的文件打成Base64的格式，写入JS
 }
 }
 ]
 }
 ]
 }
 //...
}

转载注明出处：http://www.heiqu.com/362.html

webpack4.0 入门实践教程(5)

相关推荐