一、全局安装webpack
npm install webpack -g
二、创建项目
我们在合适位置新建一个文件夹wpk-test,用于存放我们的项目。
命令行中定位到webpack-test文件夹下,输入以下命令进行项目的初始化:
npm init
这里,要求设置很多选项,可以按项目情况配置也可以不填直接回车。完成后,我们发现文件夹中增加了package.json
文件,它用于保存关于项目的信息
三、安装webpack-cli
我们在项目中本地安装webpack-cli:
npm install webpack-cli -g
四、创建入口文件
这表明webpack4.x是以项目根目录下的'./src'
作为入口,因此我们在根目录下创建src
文件夹,事实上webpack4.x
以'./src/index.js'
作为入口,单单创建src文件而没有index.js
文件仍然会报错,因此我们
将
hello.js
移动到'./src'
,并重命名为index.js
。
打包命令:直接运行webpack --mode development
或者webpack --mode production
,这样便会默认进行打包,入口文件是'./src/index.js'
,输出路径是'./dist/main.js'
,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。
这样便能够实现将'./src/index.js'
打包成'./dist/main.js'
。
不过每次都要输入这个命令,非常麻烦,我们在package.json
中scripts
中加入两个成员:
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev
便相当于执行webpack --mode development
,执行npm run build
便相当于执行webpack --mode production
。
我们在根目录执行:
npm run dev
可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。
五、总结
配置步骤:
1、创建工程目录;
2、初始化工程目录:npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack –mode development或webpack –mode production进行打包,可在package.json中配置dev和build的脚本,便只需运行npm run dev/build,作用相同。