webpack学习笔记4-使用配置文件
webpack
可以使用配置文件,也就是名为webpack.config.js
的文件,webpack.config.js
也是遵循CommonJS规范
的
1 | webpack_learn |
webpack.config.js为webpack的配置文件
1 | //webpack.config.js |
之后,我们再继续运行来打包看一下
1 | npm run build |
由于设置了输出文件的文件名,此时,文档结构改变为
1 | webpack_learn |
将index.html中的引入文件,改变为bundle.js,一样可以console出“大家好,我的名字是小明”
一条一条刷配置的事情,我们先放到后面,一步一步来
讲到配置文件了,而且配置文件遵循CommonJS规范
,那么,我们只需要遵守最终使用module.exports
来输出配置对象即可,一开始也提到过了,每个使用模块的地方,只关心引入模块的结果,并不关心内部如何实现的,我们尝试将webpack.config.js
文件修改为如下内容:
1 | //webpack.config.js |
然后为加一个script
1 | { |
然后执行指令
1 | npm run testParams #也可以使用 yarn testParams |
查看终端的console记录
1 | { production: 'product' } { |
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 | module.exports = [ |
关于使用配置文件,webpack是会默认寻找根目录下的webpack.config.js
文件,所以执行指令的时候,执行的是
1 | npx webpack #这是简写模式 |
webpack 可以通过–config指令,来指定使用哪个config文件来进行打包
例如
1 | //package.json |
目前的内容,有一些什么问题呢?
我们在代码中,使用了let
、module.exports
等es6出的内容,众所周知,es6新加的内容,在一些老版本的浏览器里并不支持,就会报错,为了解决这种问题,我们就需要引入babel
来将es6
转化为es5
,这样大部分老版本浏览器就支持了
这个时候,就要引入webpack
的loader
的概念,loader将在下一节记录
原文作者: IT梅
原文链接: http://www.meixiaohan.com/2019/08/08/webpack_learn_4/
版权声明: 转载请注明出处(必须保留原文作者署名原文链接)