webpack的使用（4） ---- 配置文件详解

一、webpack配置文件格式
固定的文件名为：
webpack.config.js 放置到项目根目录下即可
内容结构如下：

      module.exports = {
            // configuration
        };

二、单入口单输出简易打包配置
1、根目录下新建js文件夹，假设有两个文件a.js， b.js
内容分别如下：
./js/a.js

     module.exports = "hello";

./js/b.js

 var str = require("./a.js");           
 alert(str);

webpack.config.js配置文件如下：

     module.exports = {
                        entry:"./js/index.js",
                        output:{
                                path:"./bundle/",
                                filename:"bundle.js"
                        }                        
                }

说明：（1）entry等属性是固定结构，值任意修改。
（2）entry代表入口文件
对于单入口文件entry=”入口文件地址即可”
（3） output代表打包后输出的文件
有两个常用属性：path代表路径；
filename代表输出的文件名
路径习惯叫：bundle或build
3、新建index.html文件内容如下

     <script src="bundle/bundle.js"></script>
                <div>hello world</div>

三、module模块应用-案例：把css也引入进来打包
1、在上列基础上继续拓展
2、修改上列的
b.js入口文件如下

      var str = require("./a.js");
                alert(str);
                require("../css/b.css");

注意： 并且这里不需要 style-loader!，把这个写到配置文件里面即可。
3、修改webpack.config配置文件

      module.exports = {
                        entry:"./js/b.js",
                        output:{
                                path:"./bundle/",
                                filename:"bundle.js"
                        },
                        module:{
                                loaders:[
                                        { test:/\.css$/,loader:'style-loader'},
                                        { test:/\.css$/,loader:'css-loader'}
                                ]
                        }
                }

     四、resolve-可以省略入口文件中的后缀名
    1、index.js入口文件如下

      var str = require("./a");
                alert(str);
                require("../css/b");

    2、给配置文件添加 resolve 字段

    module.exports = {
                        entry:"./js/b.js",
                        output:{
                                path:"./bundle/",
                                filename:"bundle.js"
                        },
                        module:{
                                loaders:[
                                        { test:/\.css$/,loader:'style-loader'},
                                        { test:/\.css$/,loader:'css-loader'}
                                ]
                        },
                        resolve:{
                                extensions:['.vue','.js',".css",'jsx']  //自动补全识别后缀
                        }
        }

五、多入口多出口文件配置

     module.exports = {
                entry:{
                        build:"./js/b.js",
                        list:"./js/c.js"
                },
                output:{
                        path:"./build/",
                        filename:"[name].js"
                }
        }

说明：（1）这儿的entry的属性会作output中 [name]的实际参数。
也就是说打包出来的文件分别会叫：build.js 和 list.js
（2）[name] 就是一个占位符，类似函数形式参数。实际参数是build与list.