webpack打包并运行项目

1. 创建项目，并在里面创建一个dist（存放打包后的文件）文件夹和src（存放源文件）文件夹

2. 执行 npm init -y，会生成一个package.json 文件

3. 在src内：
   
   1）创建一个mathUtils.js
   
   2）创建一个index.js
   

4. 在dist内：
   
   1）创建index.html （运行查看页面）

5. 在package.json 文件内修改：
   
   main：打包后的文件名（如：main.js）
   index.js：需要打包的文件
   在scripts中进行配置，eg： “build”:“webpack”

6. 本地安装webpack
   npm install –save-dev webpack（安装的最新版）
   npm install –save-dev [email protected]（安装特定版本）
   如果你使用 webpack 4+ 版本，你还需要安装 CLI。
   npm install –save-dev webpack-cli

7. 安装完后会有一个node_modules文件夹
   

8. 在cmd中输入npm run build
   
   npm run build会首先查找该目录下有没有安装webpack，并运行局部安装的webpack，否则继续查找全局安装的webpack并运行。

9. 结束之后会在dist文件夹内生成一个main.js文件
   

10. 在index.html页面内引入main.js文件
    

11. 在浏览器浏览，控制台可以查看结果
    

本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。