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!，把这个写
4000
到配置文件里面即可。

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.