webpack可以使用配置文件,也就是名为webpack.config.js的文件,webpack.config.js也是遵循CommonJS规范

1
2
3
4
5
6
7
8
9
10
11
12
webpack_learn
|- node_modules
|- package.json
|- yarn.lock
|- webpack.config.js
|- src
|- let.js
|- get.js
|- index.js
|- dist
|- main.js
|- index.html

webpack.config.js为webpack的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
//webpack.config.js
const path = require('path');//引入nodejs的path模块
module.exports = {
entry: './src/index.js',//设置入口js文件
output: {
filename: 'bundle.js',//设置输出的js文件名
path: path.resolve(__dirname, 'dist'//设置输出的地址
}
};

//path.resolve() 方法将路径或路径片段的序列解析为绝对路径
//__dirname为项目根目录

之后,我们再继续运行来打包看一下

1
npm run build

由于设置了输出文件的文件名,此时,文档结构改变为

1
2
3
4
5
6
7
8
9
10
11
12
13
    webpack_learn
|- node_modules
|- package.json
|- yarn.lock
|- webpack.config.js
|- src
|- let.js
|- get.js
|- index.js
|- dist
+ |- bundle.js
|- main.js
|- index.html

将index.html中的引入文件,改变为bundle.js,一样可以console出“大家好,我的名字是小明”

配置项详细地址

一条一条刷配置的事情,我们先放到后面,一步一步来

讲到配置文件了,而且配置文件遵循CommonJS规范,那么,我们只需要遵守最终使用module.exports来输出配置对象即可,一开始也提到过了,每个使用模块的地方,只关心引入模块的结果,并不关心内部如何实现的,我们尝试将webpack.config.js文件修改为如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//webpack.config.js
const path = require('path');//引入nodejs的path模块

module.exports = function(env,argv){
//配置函数接受两个参数env和argv
//env:环境对象
//Webpack-CLI 的命令行选项
console.log(env,argv,process.env.NODE_ENV,7);
return {
entry: './src/index.js',//设置入口js文件
output: {
filename: 'bundle.js',//设置输出的js文件名
path: path.resolve(__dirname, 'dist'//设置输出的地址
}
};
}

// path.resolve() 方法将路径或路径片段的序列解析为绝对路径
// __dirname为项目根目录

然后为加一个script

1
2
3
4
5
6
7
{
...,
"scripts": {
...,
+ "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明"
}
}

然后执行指令

1
npm run testParams #也可以使用 yarn testParams

查看终端的console记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{ production: 'product' } {
_: [],
cache: null,
bail: null,
profile: null,
color: { level: 3, hasBasic: true, has256: true, has16m: true },
colors: { level: 3, hasBasic: true, has256: true, has16m: true },
mode: 'production',
env: { production: 'product' },
param1: 1,
param2: 2,
explane: '这是一个说明',
'info-verbosity': 'info',
infoVerbosity: 'info',
'$0': 'node_modules\\webpack\\bin\\webpack.js'
} 7

env参数为{ production: 'product' }

argv参数包含了我们在package.json里写入的param1,param2,explane参数,我们可以根据script携带参数,来在webpack的配置文件里做一些操作

另外,这个文件也是支持promise来操作的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//webpack.config.js
const path = require('path');//引入nodejs的path模块

module.exports = function(env,argv){
//配置函数接受两个参数env和argv
//env:环境对象
//Webpack-CLI 的命令行选项
console.log('promise前',(new Date().getTime()));//promise前 1578884886284
return new Promse((resolve,reject)=>{
setTimeout(()=>{
console.log('promise后',(new Date().getTime()));//promise后 1578884889286
resolve({
entry: './src/index.js',//设置入口js文件
output: {
filename: 'bundle.js',//设置输出的js文件名
path: path.resolve(__dirname, 'dist'//设置输出的地址
}
})
},3000)
});
}

// path.resolve() 方法将路径或路径片段的序列解析为绝对路径
// __dirname为项目根目录

可以看出,使用Promise,可以使webpack三秒后打包

webpack也支持多次打包

1
2
3
4
5
6
7
8
9
module.exports = [
{
mode: 'production'
// 配置1
},
{
// 配置2
}
];

关于使用配置文件,webpack是会默认寻找根目录下的webpack.config.js文件,所以执行指令的时候,执行的是

1
2
npx webpack #这是简写模式
npx webpack --config webpack.config.js #这是实际执行的模式

webpack 可以通过–config指令,来指定使用哪个config文件来进行打包

例如

1
2
3
4
5
6
7
8
//package.json
{
"scripts":{
"build1": "webpack --config webpack.config.js",
"build2": "webpack --config webpack111111.config.js",
"build3": "webpack --config webpack222222.config.js",
}
}

目前的内容,有一些什么问题呢?

我们在代码中,使用了letmodule.exports等es6出的内容,众所周知,es6新加的内容,在一些老版本的浏览器里并不支持,就会报错,为了解决这种问题,我们就需要引入babel来将es6转化为es5,这样大部分老版本浏览器就支持了

这个时候,就要引入webpackloader的概念,loader将在下一节记录