webpack从入门到放弃（一：快速使用）

个人学习笔记，仅供参考

Webpack它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle

1.新建项目文件夹，按图示新建基本结构

2、创建js文件 

   count.js

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

   sum.js

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

  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依赖

        打开终端，来到项目根目录。运行以下指令：

        3.1初始化package.json

npm init -y

        生成的package.json文件中的name 不可以命名为 webpack 否则运行会报错

        下载webpack 依赖

npm i webpack webpack-cli -D

4、运行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：指定模式（环境）。

5、观察输出文件

        默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好

        Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。所以需要更多配置来处理资源