胖蔡说技术
随便扯扯

webpack 模块配置

Webpack作为一个超级流行的前端打包工具,其最为重要的一个功能就是webpack的模块化打包功能,webpack打包一切皆模块,webpack对于每个文件都以模块的形式进行处理,本文主要介绍webpack对于JSCSS模块化处理的介绍。

前端模块化支持

Webpack模块对于JS、CSS模块的处理,基本可以完成大多数前端模块化的格式、语法规则。其格式兼容如下:

1、AMD definerequire语句

支持AMD模块导入导出语法 define require。有关AMD的相关介绍可以参考之前写的《AMD 规范》

2、CommonJs require()语句

CommonJs采用的是NodeJs模块规范,相关介绍可以参考之前写的《JS 的模块化规范发展历程》

3、csslesssass语法中的 @import 语句

@import主要是用于导入对应的模块文件,webpack支持csslesssass模块的导入依赖映射。

4、ES2015规范中的import语句

5、stylesheet 中的url()和html中的<img src=...>导入

自定义模块

webpack通过loader可以支持多种语言和预处理语言,目前webpack社区已经支持大多流行的语言和预处理语言,如:CoffeeScriptTypeScriptLessSassStylus等。下面介绍如何创建自定义Loader:

1、创建demo-loader目录,初始化项目

$ npm init -y

2、创建index.js

module.exports = function(content){
     if(this.cacheable){
        this.cacheable();
    }
    var useStrictPrefix = '\'use strict\';\n\n';
    return useStrictPrefix + content;  
}

3、安装loader

上述创建的自定义loader可以通过上传npm库,实现在线下载,具体上传过程请参考:《浅谈发布自己的npm包》

$npm install demo-loader

4、添加webpack配置

module: {
  rules:[
    {
        test: /\.js$/,
        use: [
            {
               loader:'demo-loader',
               options: {
                   sourceMap:true
               }
             }
        ] 
    }  
  ]  
}
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » webpack 模块配置
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏