一.webpack基础
1. 在项目中生成package.json:在项目根目录中输入 npm init,根据提示输入相应信息。
2. 安装webpaack
a. 在全局中安装 webpack:npm install webpack -g
b. 将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install webpack --save-dev。
3. 打包模块
webpack <entry> <output>。
<entry>用于指定打包的文件,
<output>用于指定打包后的文件。如webpack app/index.js
二.webpack配置文件常用配置项介绍
1.webpack有一个默认的配置文件 webpack.config.js,这个文件需要手动的创建,位于项目根目录中。可以为一个项目设置多个配置文件,已达到不同的配置文件完成不同的功能。怎么设置后面介绍。
2.webpack的配置文件会暴露出一个对象,格式如下:
module.exports = {
//配置项
}
3.常用配置项将要说明
entry: 打包的入口文件,一个字符串或者一个对象
output: 配置打包的结果,一个对象
fileName:定义输出文件名,一个字符串
path: 定义输出文件路径,一个字符串
module:定义对模块的处理逻辑,一个对象
loaders:定义一系列的加载器,一个数组
[
{
test:正则表达式,用于匹配到的文件
loader/loaders:字符串或者数组,处理匹配到的文件。如果只需要用到一个模块加载器则使用 loader:string,如果要使用多个模块加载器,则使用loaders:array
include:字符串或者数组,指包含的文件夹
exclude:字符串或者数组,指排除的文件夹
}
]
resolve:影响对模块的解析,一个对象查找module的话从这里开始查找
extensions:自动补全识别后缀,是一个数组自动扩展文件后缀名,意味着我们