loaders 配置
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: false} 自动修复: loaders:{ eslint: {options: {fix: true}} |
| tslint-loader | tslint | 否 | 禁用: loaders:{ tslint: false} 自动修复: loaders:{ tslint: {options: {fix: true} |
| ts-loader | typescript | 否 | 禁用: loaders:{ typescript: false} 禁用: loaders:{ typescript: true} |
| css-loader | css | 是 | 禁用: loaders:{ css: false} |
| sass-loader | sass | v3 是 v4 否 | 禁用: loaders:{ sass: false} 路径配置: loaders:{sass: {options: {includePaths: [“asset/css”]}} |
| sass-loader | scss | v3 是 v4 否 | 禁用: loaders:{ scss: false} |
| less-loader | less | 否 | 禁用: loaders:{ less: false} |
| stylus-loader | stylus | 否 | 禁用: loaders:{ stylus: false} |
| 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 }} |
Webpack 与 easywebpack 配置对比
Webpack 配置
module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader" } ] } easywebpack 配置
loaders:{ typescript: true } config.loaders 配置
config.loaders 非必须，支持 Object ｜ Array。 这里的loaders 是对 Webpack module.rules 的简化和增强。建议用 增强配置 方式配置.
- 兼容 Webpack 原生数组配置
- [增强]支持通过别名对内置 loader 开启和禁用，以及参数配置
- [增强]支持通过别名的方式添加 loader 插件
内置 loader 扩展参数统一通过 options 节点配置
// ${app_root}/webpack.config.js module.exports = { loaders:{ ${loader别名}:{ options:{ // 具体loader参数 } } } } Webpack loaders 原生数组配置举例
// ${app_root}/webpack.config.js module.exports = { ...... loaders:[ { test: /\.html$/, use: ['html-loader', 'html-swig-loader'] } ] } Webpack loaders 增强配置举例
// ${app_root}/webpack.config.js module.exports = { ...... loaders:{ less: true, // 开启less， 默认禁用 stylus: true // 开启stylus， 默认禁用 } } config.loaders : {Object} Webpack loader 配置, 支持自定义格式和原生格式.
key:value 形式, 其中 key 为别名, 可以自由定义, easywebpack和对应解决方案内置了一些别名和loader.
比如我要添加一个全新且easywebpack没有内置的 html-swig-loader, 可以这样配置:
{ loaders:{ swig : { test: /\.html$/, use: ['html-loader', 'html-swig-loader'] } } } swig key别名随意, 我可以叫 swig, 也可以叫 htmlswig 等等
禁用 easywebpack 内置的 babel-loader 可以这样配置
{ loaders:{ babel:false } } 或
{ loaders:{ babel:{ enable:false } } } 修改 easywebpack 内置 babel-loader 的 test 和 use, 可以这样配置
因use存在顺序问题, use 目前采用的策略是完全覆盖
{ 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
{ loaders:{ sass:{ enable: true, type: ['client', 'server'], 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属性是完全覆盖.