webpack打包并运行项目

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

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

  3. 在src内:
    webpack打包并运行项目
    1)创建一个mathUtils.js
    webpack打包并运行项目
    2)创建一个index.js
    webpack打包并运行项目

  4. 在dist内:
    webpack打包并运行项目
    1)创建index.html (运行查看页面)

  5. 在package.json 文件内修改:
    webpack打包并运行项目
    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文件夹
    webpack打包并运行项目

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

  9. 结束之后会在dist文件夹内生成一个main.js文件
    webpack打包并运行项目

  10. 在index.html页面内引入main.js文件
    webpack打包并运行项目

  11. 在浏览器浏览,控制台可以查看结果
    webpack打包并运行项目