style-loader、css-loader

我们在webpack中使用css，当我们npm run build ：dev打包的使用，会报错，因为webpack默认的状态下只能识别js，不能识别css，所以就需要安装loader来帮助我们去解析css文件进行打包

npm i style-loader css-loader -D

style-loader: 把解析后的css代码从js中抽离,放到头部的style标签中(在运行时做的)
css-loader: 解析css文件代码

配置文件

module.exports = {//...module: {rules: [{test: /.css$/,//注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件，然后在把css提取出来放到，头部的style里面use: ['style-loader', 'css-loader'],},],},
};

less-loader

项目开发中,为了更好的提升开发体验,一般会使用css超集less或者scss,对于这些超集也需要对应的loader来识别解析。以less为例,需要安装依赖:

npm i less-loader  less -D

less-loader: 解析less文件代码,把less编译为css
less: less核心

配置文件

module.exports = {//...module: {rules: [{test: /.css$/,//注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件，然后在把css提取出来放到，头部的style里面use: ['style-loader', 'css-loader'],},{test:/.less$/,use:['style-loader', 'css-loader','less-loader']},],},
};

postcss-loader

虽然css3现在浏览器支持率已经很高了, 但有时候需要兼容一些低版本浏览器,需要给css3加前缀,可以借助插件来自动加前缀, postcss-loader就是来给css3加浏览器前缀的

npm i  postcss-loader autoprefixed -D

postcss-loader：处理css时自动加前缀
autoprefixer：决定添加哪些浏览器前缀到css中

module.exports = {//...module: {rules: [{test: /.css$/,//注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件，然后在把css提取出来放到，头部的style里面use: ['style-loader', 'css-loader'],},{test: /.less$/,use: ['style-loader','css-loader',//新增{loader: 'postcss-loader',options: {postcssOptions: {plugins: ['autoprefixed'],},},},'less-loader',],},],},
};

配置完成后,需要有一份要兼容浏览器的清单,让postcss-loader知道要加哪些浏览器的前缀,在根目录创建 .browserslistrc文件

# 换行相当于 and
last 2 versions # 回退两个浏览器版本
> 0.5% # 全球超过0.5%人使用的浏览器，可以通过 caniuse.com 查看不同浏览器不同版本占有率
IE 10 # 兼容IE 105

以兼容到ie9和chrome35版本为例,配置好后,执行npm run build:dev打包,可以看到打包后的css文件已经加上了ie和谷歌内核的前缀

bable-loader

我相信都懂bable是干嘛的，偷个懒

安装依赖

由于webpack默认只能识别js文件,不能识别jsx语法,需要配置loader的预设预设 @babel/preset-typescript 来先ts语法转换为 js 语法,再借助预设 @babel/preset-react 来识别jsx语法。

npm i babel-loader @babel/core @babel/preset-react @babel/preset-typescript -D

module.exports = {// ...module: {rules: [{test: /.(ts|tsx)$/, // 匹配.ts, tsx文件use: {loader: 'babel-loader',options: {// 预设执行顺序由右往左,所以先处理ts,再处理jsxpresets: ['@babel/preset-react','@babel/preset-typescript']}}}]}
}

babel设置js兼容问题

npm i babel-loader @babel/core @babel/preset-env core-js -D

babel-loader: 使用 babel 加载最新js代码并将其转换为 ES5（上面已经安装过）
@babel/corer: babel 编译的核心包
@babel/preset-env: babel 编译的预设,可以转换目前最新的js标准语法
core-js: 使用低版本js语法模拟高版本的库,也就是垫片

module.exports = {// ...module: {rules: [{test: /.(ts|tsx)$/,use: {loader: 'babel-loader',options: {// 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法presets: [["@babel/preset-env",{// 设置兼容目标浏览器版本,这里可以不写,babel-loader会自动寻找上面配置好的文件.browserslistrc// "targets": {//  "chrome": 35,//  "ie": 9// },"useBuiltIns": "usage", // 根据配置的浏览器兼容,以及代码中使用到的api进行引入polyfill按需添加"corejs": 3, // 配置使用core-js低版本}],'@babel/preset-react','@babel/preset-typescript']}}}]}
}

webpack最常用的loader：style-loader、css-loader、less-loader、postcss-loader、babel-loader等相关推荐

复习webpack的常用loader
今天复习了下webpack的常用loaders,其实习惯ES6开发的话,webpack的config.js基础配置应该是比较固定: 首先是JS,我们ES6要转为ES5,需要用到babel转码: 1. ...
如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
react+webpack项目常用的插件(plugins)
一.HtmlWebpackPlugin使用: npm install html-webpack-plugin --save-dev 解释:这个插件是简化创建生成html(h5)文件用的,如果你引入的文 ...
webpack使用css-loader跟style-loader加载css报错
webpack使用css-loader跟style-loader加载css报错 webpack使用css-loader跟style-loader加载css报错 webpack.config.js 配置 ...
vue 组件不受全局样式影响_组件库引入全局样式lib/style/index.css,会污染全局基础样式...
I have searched the issues of this repository and believe that this is not a duplicate. Version 1.3. ...
Vue3+vite配置postcss-pxtorem报错[plugin:vite:css] Failed to load PostCss config
1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件,vite创建的项目,在项目 ...
webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...

webpack最常用的loader：style-loader、css-loader、less-loader、postcss-loader、babel-loader等