webpack打包

208 阅读1分钟

webpack

安装

npm init -y

npm install webpack webpack-cli --save-dev

查看webpack的版本号

node_modules\.bin\webpack -v

查看webpack的帮助

node_modules\.bin\webpack -h

--mode 设置开发环境还是生产环境

--entry 设置打包入口(我要将那个文件打包)

--progress 在打包过程中出现百分比进度

--output 设置打包出口(打包生成的文件)

命令行打包

node_modules\.bin\webpack "./src/main.js" --output="./dist/main.js"

package.json里面scripts里面写一个build属性

node_modules.bin\webpack './src/main.js' --output='./dist/main.js' --mode='development' --prog ress --watch

引入

然后在根目录建一个index.html,在html里面引入

--progress(监听进度)和--watch(dist里面数据变化一次,然后就监听一次)

node_modules.bin\webpack './src/main.js' --output='./dist/main.js' --mode='development' --progress --watch

在package.json中配置scripts脚本

{ "name": "init", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build":"webpack --progress --color --mode=development" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.29.6", "webpack-cli": "^3.3.0" } }