问题:webpack 默认只能打包处理以 .js 后缀名结尾的模块,以下导入会报错

import './css/1.css'

打包处理css文件

 npm i -d style-loader css-loader

2
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
test 表示匹配的文件类型， use 表示对应要调用的 loader

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

注意:
use 数组中指定的 loader 顺序是固定的,既’style-loader’必须在’css-loader’之前

CSS浏览器兼容配置

npm i -d postcss-loader autoprefixer

2
在项目根目录中创建 postcss 的配置文件 postcss.config.js

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = { plugins: [ autoprefixer ] // 挂载插件
}

3
在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则

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

加载图片和文字字体

npm i -d url-loader file-loader

2
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

module: { rules: [ {  test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,  use: 'url-loader?limit=16940' } ]
}

其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

Node.js webpack 加载器相关推荐

js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
Node.js---02、node.js 模块加载机制
2019独角兽企业重金招聘Python工程师标准>>> node.js模块分为自定义模块.扩展模块和核心模块.所有模块的加载都是通过关键字require()实现. 1.自定义模块的加 ...
webpack加载器打包样式表中的图片和字体
前言 index.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
node js并发加载页面缓慢_详解如何利用前端Node模块zlib开启gzip压缩使页面加载速度更快...
前言这篇文章我们来聊一聊Node的原生模块zlib,它的主要作用是压缩和解压缩数据,我们都知道数据在压缩后可以减小体积,在网络传输时提高传输速度和节约带宽! API用法 zlib这个模块提供了很多的 ...
webpack中loader加载器(打包非js模块)
通过loader打包非js模块我这儿用VScode为编辑器在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结尾的模块,webpack 默认处理不了, ...
Webpack基础之加载器
加载器(Loaders): loader 是对应用程序中资源文件进行转换.它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件示例: 例如,你可以使用 lo ...
Webpack的加载器
一.什么是加载器(loaders) loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loa ...
webpack项目安装与加载器常出现问题
项目名为webpack,直接报错,在package.json里面把名字修改 TypeError: this.getOptions is not a function版本过高,得安装低版本的打包jqu ...
JS框架设计之加载器所在路径的探知一模块加载系统
1.要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为: ...

Node.js webpack 加载器

打包处理css文件

CSS浏览器兼容配置

加载图片和文字字体

Node.js webpack 加载器相关推荐

最新文章

热门文章