webpack打包并运行项目
-
创建项目,并在里面创建一个dist(存放打包后的文件)文件夹和src(存放源文件)文件夹
-
执行 npm init -y,会生成一个package.json 文件
-
在src内:
1)创建一个mathUtils.js
2)创建一个index.js -
在dist内:
1)创建index.html (运行查看页面) -
在package.json 文件内修改:
main:打包后的文件名(如:main.js)
index.js:需要打包的文件
在scripts中进行配置,eg: “build”:“webpack” -
本地安装webpack
npm install --save-dev webpack(安装的最新版)
npm install --save-dev [email protected](安装特定版本)
如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli -
安装完后会有一个node_modules文件夹
-
在cmd中输入npm run build
npm run build会首先查找该目录下有没有安装webpack,并运行局部安装的webpack,否则继续查找全局安装的webpack并运行。 -
结束之后会在dist文件夹内生成一个main.js文件
-
在index.html页面内引入main.js文件
-
在浏览器浏览,控制台可以查看结果