webpack 模块配置

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

前端模块化支持

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

1、AMD define 和require语句

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

2、CommonJs require(）语句

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

3、css、less、sass语法中的 @import 语句

@import主要是用于导入对应的模块文件，webpack支持css、less、sass模块的导入依赖映射。

4、ES2015规范中的import语句

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

自定义模块

webpack通过loader可以支持多种语言和预处理语言，目前webpack社区已经支持大多流行的语言和预处理语言，如：CoffeeScript、TypeScript、Less、Sass、Stylus等。下面介绍如何创建自定义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
               }
             }
        ] 
    }  
  ]  
}