wepack学习一 建立初始化项目

1.具有node / npm环境,一般在安装node的同时即安装了npm控制管理
http://nodejs.cn/download/
点击链接进行下载安装
安装完毕后进行测试

node -v
npm -v

2.创建项目文件夹,进入项目后执行命令后创建文件模版

npm init

这里写图片描述

3.此时项目文件夹内出现package.json配置文件
在项目中安装webpack

npm install webpack --save-dev

这里写图片描述

4.创建一个静态页(index.html)及入口文件(app.js)

5.进行打包操作
此时执行webpack app.js bundle.js会报错,原因在于不是全局安装的webpack
由于只是在项目中安装webpack,此时应该执行

node_modules/.bin/webpack app.js bundle.js

对于之前安装过vue的脚手架的朋友,此时可能会询问选择哪一个webpack
这里写图片描述
这里写图片描述

还是会报错,原因在于webpack在4版本以后,对于执行语言命令要求更严格了,此时应该执行

npx webpack app.js --output-filename bundle.js --output-path . --mode development 

这里写图片描述

此处不加--mode development会报黄色错误
6.打开该index.html网页

猜你喜欢

转载自blog.csdn.net/cxwtsh123/article/details/80763326
今日推荐