1 安装
npm i webpack -g
同时要全局安装webpack-cli
npm i webpack-cli -g
2 初步尝试
但是此时在demo中使用webpack ./src/main.js -o ./dist/bundle.js会报错
image.png
原因是没有把全局安装的webpack链接到项目demo里来，执行以下命令
npm link webpack
image.png
再执行 webpack ./src/main.js -o ./dist/bundle.js
image.png
3.使用webpack.config.js文件
image.png
终端执行
webpack
image.png
4.使用webpack-dev-server实现自动打包
-
1.
npm i webpack-dev-server -D把这个工具安装的项目的本地依赖 -
2.安装完毕后，这个工具的用法，和
webpack命令的用法，完全一样
在package.json配置启动脚本
image.png
-
3.由于我们是在项目本地安装的
webpack-dev-server,所以无法把它当做脚本命令
在终端下直接运行；（只有那些安装到全局-g的工具，才能在终端中正常执行） -
4.注意
webpack-dev-server这个工具如果想要正常运行，要求在本地项目中必须安装webpack
完成以上步骤后
image.png
网友评论