vue实战--webpack基本使用二

使用webpack打包CSS

安装：npm i -D style-loader css-loader

【main.js】// 导入 css 文件import './css/app.css'

【配置前】npm run dev

【webpack.config.js】// 配置各种资源文件的loader加载器module: {  // 配置匹配规则  rules: [    // test 用来配置匹配文件规则（正则）    // use  是一个数组，按照从后往前的顺序执行加载    //  创建style标签,将css转化为CommonJS代码    {test: /\.css$/, use: ['style-loader', 'css-loader']},   ]}

使用webpack打包sass文件

安装：npm i -D sass-loader node-sass

【webpack.config.js】module:{  rules:[  // 将Sass编译为css    {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},  ]}

图片和字体打包

• 安装：npm i -D url-loader file-loader
• file-loader：加载并重命名文件（图片、字体 等）
• url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中
  

【webpack.config.js】module: {  rules:[    // 打包 图片文件    { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },    // 打包 字体文件    { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }  ]}

图片配置说明

• 1 默认将图片转为base64编码格式
• 2 limit参数的作用：
  
  • 限制图片的文件大小，单位为：字节(byte)
  • 文件重命名为哈希值，保证文件不会重复。例如：一张图片拷贝一个副本，这两个图片实际是同一个
• 3 规则：
  
  • 当图片文件大小（字节）小于指定的limit时，图片被转化为base64编码格式
  • 当图片文件大小（字节）大于等于指定的limit时，图片被重命名，不使用base64编码，此时，需要file-loader来加载图片

rules: [    // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},    {      test: /\.(jpg|png|gif|jpeg)$/,      use: [        {          loader: 'url-loader',          options: {            limit: 8192          }        }      ]

字体配置说明

• 1 url-loader 会将字体文件解析为 base64编码格式的字符串，嵌入到CSS样式中
• 2 file-loader 以文件形式加载字体文件