Node.js webpack 加载器

柔光的暖阳◎ 2023-01-04 10:28 107阅读 0赞

问题: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 加载器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Webpack 懒加载

相关 Node.js webpack 加载器

相关 Vue笔记：WebPack模块加载器兼打包工具

相关前端构建工具Webpack之加载器（loader）

相关 webpack简单使用(2)---加载器

相关【javascript】webpack 加载svg

相关 Webpack 懒加载

相关 Webpack模块加载器

相关 webpack之Loader加载器

相关 nodejs模块加载机制