Webpack基本使用

文件夹

 

1.下载依赖

1. 打开终端，来到项目根目录。运行以下指令：
   初始化  package.json

   npm init -y
   

2. 下载依赖

   npm i webpack webpack-cli -D
   

2.创建文件

1. count.js

   export default function count(x, y) {
     return x - y;
   }
   

2. sum.js

   export default function sum(...args) {
     return args.reduce((p, c) => p + c, 0);
   }
   

3. main.js

   import count from "./js/count";
   import sum from "./js/sum";
   
   console.log(count(2, 1));
   console.log(sum(1, 2, 3, 4));
   

3.启用 Webpack

• 开发模式

  npx webpack ./src/main.js --mode=development
  

• 生产模式

  npx webpack ./src/main.js --mode=production
  

  npx webpack: 是用来运行本地安装 Webpack 包的。

  ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

  --mode=xxx：指定模式（环境）。

 4.观察输出文件

        默认 Webpack 会将文件打包到 dist 目录，查看 dist 目录下文件情况