webpack 从基础到进阶 3

资源解析： 解析 css

• css-loader 用于加载.css 文件， 而且转换成 commmon.js 对象
• style-loader 将样式经过<style/> 标签插入到 head 中

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.css$/,
                  use: [
                  'style-loader',
                  'css-loader',
                  ]
              }
          ]    
    }
}

复制代码

资源解析 ： 解析 less 和 sass

• less-loader 用于将 less 转换成 css

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.less$/,
                  use: [
                  'style-loader',
                  'css-loader',
                  'less-loader',
                  ]
              }
          ]    
    }
}

复制代码

资源解析： 解析图片

• file-loader 用于处理文件

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.(png|svg|jpg|gif)$/,
                  use: [
                  'file-loader',
                  ]
              }
          ]    
    }
}

复制代码

资源解析： 解析字体

• file-loader 也能够用来处理字体

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.(woff|woff2|eot|ttf|otf)$/,
                  use: [
                  'file-loader',
                  ]
              }
          ]    
    }
}

复制代码

资源解析： 使用 url-loader

• url-loader 也能够处理图片和字体
• 能够设置较小资源自动 base64

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.(png|svg|jpg|gif)$/,
                  use: [
                  'url-loader',
                  options:{
                    limit: 10240
                  }
                  ]
              }
          ]    
    }
}

复制代码

webpack 中的文件监听

• 文件监听是在发现源码发生变化时， 自动从新构建出新的输出文件

webpack 开启监听模式， 有两种方式：

• 启动 webpack 命令时， 带上 --watch 参数
• 在配置 wenpack.config.js 中设置 watch : true