webpack1-打包流程
webpack1-打包流程
-
初始化
命令:npm init -y
生成的文件:package.json
在package.json中的scripts中添加
“dev”: “webpack --mode development”
“build”: “webpack --mode production” -
安装webpack
2.1 安装全局webpack,安装过全局的webpack则跳过此步骤
命令:npm i webpack -g
2.2 安装项目webpack
命令:npm i webpack -s -d
生成的文件夹:node_modules
生成的文件:package-lock.json
2.3 安装项目webpack-cli
命令:npm i webpack-cli -
拉取jquery
命令:npm i jquery -S
生成文件夹:node_modules/jquery -
编写xxx.js
-
打包xxx.js
命令:webpack 文件目录/xxx.js -o ./dist/xxx-bundle.js --mode development
例:webpack ./src/js/myDemo.js -o ./dist/myDemo-bundle.js --mode development -
在html中引用xxx-bundle.js
-
页面效果