【转】webpack使用方法(三):自定义webpack配置
原文:https://blog.csdn.net/simpleasong/article/details/123024224
前言
实际上,webpack-cli给我们提供了丰富的终端命令行指令,可以通过webpack --help来查看。同样,需要在前面加上npx
npx webpack --help
1
一、设置入口文件
-
进入上一节的setup目录,手动删除dist文件夹。
-
输入指令
npx webpack --entry ./src/index.js --mode production
–entry表示设置后面路径的文件为入口文件,–mode指定环境,production为生产环境。
运行之后发现setup目录下同样生成了dist文件夹及其子文件main.js。
-
到这里就会发现,使用这种命令行来打包文件,真的很不方便,也不直观,而且还不能保存我们的一些配置。因此,webpack给我们提供了通过配置文件去自定义配置参数的能力。
二、通过配置文件来配置参数
-
在setup目录下新建webpack.config.js文件
这个文件名不能随便取,因为这是webpack自动读取的 -
这个文件是在Node.js里面运行的,因此,定义模块的时候要使用Node.js的CommonJs模块,所以使用module.exports来定义。
-
首先,设置入口entry,还是以index.js为入口文件。
module.exports = { entry:'./src/index.js', }
-
设置出口output,filename属性指定输出文件的文件名,path属性指定输出路径。
module.exports = { entry:'./src/index.js', output:{ filename:'bundle.js', path:'./dist' } }
-
执行npx webpack命令
npx webpack
发现报错了,提示输出路径“./dist”不是一个绝对路径
-
使用Node.js的方法将输出路径设置为绝对路径,第一个参数__dirname表示当前webpack.config.js所在的物理路径,第二个参数表示基于第一个参数的路径,将文件解析到这个路径下,这样就指定了一个绝对路径。
const path = require('path'); module.exports = { entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname, './dist') }, }
-
设置mode的值,先给一个“none”,不然执行webpack命令会报警告。
const path = require('path'); module.exports = { entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname, './dist') }, mode:'none' }
-
接下来执行npx webpack就可以了
npx webpack
执行成功后可以看到在dist文件夹下产生了一个bundle.js文件。
-
想看效果同样可以在index.html页面中将bundle.js引入进来,然后在浏览器运行,最终同样打印出“hellow world”。