Webpack——样式处理

1.style-loader与css-loader

css-loader负责解析css相关文件。

style-loader负责在html文档中插入解析后的css文件。所以style-loader一定要在css-loader之后生效才可以
写法：['style-loader', 'css-loader'](webpack解析从后向前解析)

完整配置：

1 {
2     test: /.css$/,
3     use: ['style-loader', 'css-loader']
4 }

style-loader还有一些其他用法例如: 生成标签的位置。在生成css文件前可以做全局修改。可以定义生成的style的形式例如link。
style新版本中已经不支持insertAt语法了,以前的inserAt:'top'甚至insert: 'top'都是会报错的。建议直接阅读下面的文档。
文档地址：https://www.npmjs.com/package/style-loader
2.less-loader的配置

{test: /.less$/,use: ['style-loader', 'css-loader', 'less-loader']
}

　sass,stylus等css扩展语法也是一样的配置。切记配置的顺序，不能搞错

3.mini-css-extract-plugin插件
上面的配置以后，打包以后的css会形成style标签全部加载到html里面。当样式过多的时候，可能会造成阻塞。
所以我们应该使用插件将css从中抽离出来。

plugins：[new MiniCssExtractPlugin({filename: 'a.css'})
],
module: {rules: [{test: /\.js$/,use: ['babel-loader']},{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader']},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']}]
}

　以上的配置会将css和less最后都分离出来，最终命名为一个叫做a.css文件。如果想将less和普通css分离成两个文件，那么需要new两个插件对象，分别放在不同的rules里面。
3.postcss-loader和autoprefixer插件
这两个东西是给我们的css增加浏览器前缀的。使用方法：

需要在webpack.config.js同级目录下建立一个文件postcss.config.js

module.exports = {plugins: [require('autoprefixer')]
}

然后在package.json里面加入

"browserslist": ["defaults","not ie < 11","last 2 versions","> 1%","iOS 7","last 3 iOS versions"
]

这个列表是支持不同浏览器的含义。但是这种配置是全局公用的。也可以配置成私有的（只有autoprefixer使用的列表）
然后在loader中这么配置。

module: {rules: [{test: /\.js$/,use: ['babel-loader']},{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']},{test: /\.less$/,use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']}]
}

4.optimize-css-assets-webapck-plugin插件压缩css相关文件

optimization: {minimizer: [new OptimizeCssPlugin()]
}

这个时候打包会发现，抽离出来的css文件被压缩了。但是js文件不会被压缩了。
所以还需要手动压缩js文件：我们需要使用uglifyjs-webpack-plugin插件

optimization: {minimizer: [new UglifyjsWebpackPlugin({cache: true,    // 缓存parallel: true, // 并发打包sourceMap: true // 源码映射}),new OptimizeCssPlugin()]
}

转载于:https://www.cnblogs.com/fourthCities/p/11523705.html

Webpack——样式处理相关推荐

css-6 df15,webpack 样式文件的代码分割(15)
获取全套webpack 4.x教程,请访问瓦力博客在上一小节,我们将开发环境和生产环境区分开来.这一小节,我们来操作如何将样式文件的代码分割. 1.安装 yarn add mini-css-extr ...
Webpack实战（五）：轻松读懂Webpack如何分离样式文件
在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...
逆向爬虫28 webpack扣代码
逆向爬虫28 webpack扣取码目标: 了解 js 模块化打包webpack代码的特点. 掌握扣取 webpack 代码的方法. 一. 模块化 webpack 代码特点有的时候, 我们发现一些网 ...
使用Acuity Scheduling的API构建在线课堂日历
I moonlight (a lot of us do). I moonlight as a Lego Engineer. It's always been a dream of mine, and ...
webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中？ - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想. 当前的解决方案 CSS 是无法缓存的,并且还有一个 ...
webpack加载器打包样式表中的图片和字体
前言 index.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
Bootstrap4默认样式不对胃口？教你使用NPM+Webpack+SASS来定制
Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...
webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
webpack：全局变量、图片处理、样式兼容
文章目录 webpack:全局变量.图片处理.样式兼容前情回顾全局变量图片处理(三种方式) 模块化样式兼容性 webpack:全局变量.图片处理.样式兼容前情回顾装载器loader(加载) ...

Webpack——样式处理

Webpack——样式处理相关推荐

最新文章

热门文章