easywebpack
基于 Webpack 前端工程构建方案

loaders

easywebpack - 基于 Webpack 前端工程构建方案, 支持 Webpack Vue, React, Weex, JS, Weex等多种前端框架构建, 包括 Webpack Vue SSR, Webpack React SSR 构建。
Date:  2019-12-23
Word Count:  1.2k
Read Times:  5 Min
Read Count: 

v3 代表 easywebpack 3.x.x, v4 代表 easywebpack 4.x.x

内置配置 loaders

  • easywebpack 内置了 babel, eslint, css, sass, less, stylus, urlimage, urlfont 等loader,

  • easywebpack-vue 内置了 vue, vuehtml 等loader,

  • easywebpack-react 内置了 react-hot-loader 等loader,

  • easywebpack-weex 内置了 vue, weex 等loader.

  • easywebpack-html 内置了 html, nunjucks 等loader.

loader 别名 默认是否开启 webpack.config.js配置举例
babel-loader babel 是 禁用:
loaders:{ babel: false}
eslint-loader eslint 否 启用:
loaders: { eslint: true}
自动修复:
loaders:{ eslint: {options: {fix: true}}
tslint-loader tslint 否 启用:
loaders:{ tslint: tue}
自动修复:
loaders:{ tslint: {options: {fix: true}
ts-loader ts 否 禁用:
loaders:{ ts: false}
开启:
loaders:{ ts: true}

easywebpack < 4.11.0 请用 typescript 别名
css-loader css 是 N/A
sass-loader sass v3 是 v4 否 开启: **
loaders:{ sass: true}
**路径配置:
loaders:{sass: {options: {includePaths: [“asset/css”]}}
安装依赖：
“node-sass“: “^4.5.3”,
“sass-loader“: “^6.0.6”,
sass-loader scss v3 是 v4 否 开启:
loaders:{ scss: true}
安装依赖：
“node-sass“: “^4.5.3”,
“sass-loader“: “^6.0.6”,
less-loader less 否 开启:
loaders:{ less: true}
安装依赖：
“less“: “^2.7.2”,
“less-loader“: “^4.0.5”,
stylus-loader stylus 否 开启:
loaders:{ stylus: true }
“stylus”: “^0.54.5”,
“stylus-loader”: “^3.0.0”,
url-loader urlimage 是 禁用:
loaders:{ urlimage: false}
配置limit(默认1024):
loaders:{urlimage: {options: {limit: 2048 }}
url-loader urlfont 是 禁用:
loaders:{ urlfont: false}
配置limit(默认1024):
loaders:{urlfont: {options: {limit: 2048 }}
url-loader urlmedia 是 禁用:
loaders:{ urlmedia: false}
配置limit(默认1024):
loaders:{urlmedia: {options: {limit: 2048 }}
nunjucks-html-loader nunjucks 否 启用:
loaders:{ nunjucks: true }
ejs-loader ejs 否 启用:
loaders:{ ejs: true }

内置 loader 扩展参数统一通过 options 节点配置

// ${app_root}/webpack.config.js
module.exports = {
  loaders:{
     ${loader别名}:{
      options:{
        // 具体loader参数
      }
    }
  }
}


或

module.exports = {
  module:{
     rules:[
       {
         ${loader别名}:{
            options:{
              // 具体loader参数
            }
                }
       }
     ]
  }
}

Webpack 与 easywebpack 配置对比

Webpack 配置

module: {
  rules: [
    { test: /\.tsx?$/, loader: "ts-loader" }
  ]
}

easywebpack 配置

// 最新版本建议配置
module: {
  rules: [
    { ts: true }
  ]
}

或

loaders:{
  ts: true
}

module.rules | loaders 配置

config.loaders | config.module.rules 非必须，支持 Object ｜ Array。 这里的loaders 是对 Webpack module.rules 的简化和增强。建议用 增强配置 方式配置.

  • 兼容 Webpack 原生数组配置

  • [增强]支持通过别名对内置 loader 开启和禁用，以及参数配置

  • [增强]支持通过别名的方式添加 loader 插件

内置 loader 扩展参数统一通过 options 节点配置

// ${app_root}/webpack.config.js

// 最新版本建议配置
module: {
  rules: [
    { 
      ${loader别名}:{
          include:[],
          options:{
            // 具体loader参数
          }
       }
    }
  ]
}

// OR

module.exports = {
  loaders:{
     ${loader别名}:{
      include:[],
      options:{
        // 具体loader参数
      }
    }
  }
}

Webpack loaders | module.rules 原生数组配置举例

// ${app_root}/webpack.config.js
module.exports = {
  ......
  module: {
   rules:[
    { ts: true },
    {
      test: /\.html$/,
      use: ['html-loader', 'html-swig-loader']
    }
   ]
}

Webpack loaders | module.rules 增强配置举例

// ${app_root}/webpack.config.js

// 最新版本建议配置
module.exports = {
  ......
  module: {
   rules: [
    { ts: true },
    { less: true }
   ]
  }
}

// OR

module.exports = {
  ......
  loaders:{
    less: true, // 开启less， 默认禁用
    stylus: true // 开启stylus， 默认禁用
  }
}

eslint 配置自动修复功能, 默认禁用

// ${app_root}/webpack.config.js
module.exports = {
  loaders:{
    eslint:{
      options:{
        fix: true
      }
    }
  }
}

sass/scss 配置 css 文件查找目录

// ${app_root}/webpack.config.js
const path = require('path');
module.exports = {
  loaders:{
    sass: {
      options: {
        includePaths: [
          path.resolve(process.cwd(), 'app/web/asset/style')
        ]
      }
    },
    scss: {
      options: {
        includePaths: [
          path.resolve(process.cwd(), 'app/web/asset/style')
        ]
      }
    }
  }
}

vue 配置 img 图片自定义属性 webpack 解析

// ${app_root}/webpack.config.js
module.exports = {
  loaders:{
    vue: {
      options: { transformToRequire: { img: ['url', 'src'] } }
    }
  }
}

自定义格式和原生格式.

config.loaders | module.rules : {Object} Webpack loader 配置, 支持自定义格式和原生格式

key:value 形式, 其中 key 为别名, 可以自由定义, easywebpack和对应解决方案内置了一些别名和loader.

比如我要添加一个全新且 easywebpack 没有内置的 html-swig-loader, 可以这样配置:

// 最新版本建议配置
module.exports = {
  ......
  module: {
   rules: [  // 内置 loader 和 原生 loader 混合配置
    { ts: true },
    { 
      test: /\.html$/,
      use: ['html-loader', 'html-swig-loader']
    }
   ]
  }
}

// or

module.exports = {
  ......
  {
   loaders:{
     ts: true,
     swig: {
      test: /\.html$/,
      use: ['html-loader', 'html-swig-loader']
     }
   }
  }
}

swig key 别名随意, 我可以叫 swig, 也可以叫 htmlswig 等等

禁用 easywebpack 内置的 babel-loader 可以这样配置

// 最新版本建议配置
module.exports = {
  ......
  module: {
   rules: [  
    { babel:false }
   ]
  }
}

// OR
module.exports = {
  loaders:{
    babel:false
  }
}

修改 easywebpack 内置 babel-loader 的 test 和 use, 可以这样配置

因 use 存在顺序问题, use 目前采用的策略是完全覆盖

// 最新版本建议配置

module.exports = {
  ......
  module: {
   rules: [  
    { babel: false }, // 禁用默认
    {                // 自己配置
      test: /\.(jsx|vue)?$/,
      exclude: [/node_modules/, 'page/test'],
      use: [
       {
        loader: 'babel-loader'
       },
       {
        loader: 'eslint-loader'
       }
      ]
    }
   ]
  }
}

// OR

module.exports = {
  loaders:{
    babel : {
      test: /\.(jsx|vue)?$/,
      exclude: [/node_modules/, 'page/test'],
      use: [
       {
        loader: 'babel-loader'
       },
       {
        loader: 'eslint-loader'
       }
      ]
    }
  }
}

config.loaders 具体loader配置项属性介绍

config.loader 配置项除了支持的loader原生属性, 还扩展了 env, type, enable, postcss, framework 五个属性, 其中 postcss, framework 用于css相关loader, 例如内置的 sass-loader

// 最新版本建议配置
module.exports = {
  ......
  module: {
   rules: [  
    { sass: false }, // 禁用默认
    {                // 自己配置
     test: /\.sass/,
     exclude: /node_modules/,
      use: ['css-loader', {  
      loader: 'sass-loader',
      options: {
        indentedSyntax: true
      }
     }]
    }
   ]
  }
}

// or

{
  loaders:{
    sass:{
       enable: true, 
       test: /\.sass/,
       exclude: /node_modules/,
       use: ['css-loader', {  
          loader: 'sass-loader',
          options: {
            indentedSyntax: true
          }
       }],
       postcss: true
    }
  }
}

  • env: 见 config.env 说明, 可选, 默认全部

  • type: 见 config.type 说明, 可选, 默认全部

  • enable: {Boolean/Function} 是否启用, 可选, 默认可用

  • postcss: {Boolean} 可选, 特殊配置, 是否启用postcss, 只有css样式loader需要配置, 其他loader不需要配置

  • use: {Array/Function} 必须, 支持扩展的Function配置和原生Use配置, use属性是完全覆盖.

Author: sky
Link: https://easyjs.cn/easywebpack/loader/
yuque: https://yuque.com/easy-team/easywebpack/loader/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
JS 打包工程方案 JS 打包工程方案
我们经常会遇到单独对 JS 打包的场景，比如 es6 写的 npm 包需要构建成 es5 模式. easywebpack 也提供了对应的解决方案： easywebpack-js基于 easywebpack-js 构建配置编写// build/index.js const easywebpac...
2019-12-23 sky
Next 
多页面举例 多页面举例
基于 easywebpack-cli 模式构建Vue前端渲染项目一. 全局安装 easywebpack-cli 插件npm i easywebpack-cli -g 安装成功以后, 就可以在命令行中使用 easy 或 easywebpack 命令, 比如 easy build, easy server, easy print 等二. 添加 webpack.config.js 配置在项目根目录添加 webpack.config.js 文件, 添加如下配置const path = require(...
2019-12-23 sky