webpack入门

webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 – webpack文档介绍

我的理解：将程序代码及各种资源按照设置输出为符合目标环境要求的工具

开始使用webpack

cli方式

这种方式可以直接在命令行里使用webapck打包，打包参数通过命令参数指定。

• 新建目录

  > mkdir use-cli
  > cd use-cli

• 安装webpack 依赖
  npm i webpack webpack-cli -D

• 新建文件及代码

  // common.js
  export function sum(a, b) {
    return a + b;
  }
  export function multi(a, b) {
    return a * b;
  }
  export default sum
  
  // first.js
  import { sum } from './common';
  
  const num1 = sum(1, 6);
  const num2 = sum(8, 6);
  const res = sum(num1, num2);
  
  console.log(res);

  也可以使用官网demo 的代码

• 在命令行输入下面的命令

  npx webpack --entry ./first.js  --output-path ./build

• 查看webpack 的编译结果在当前目录下的buil的文件夹。
  如果你先验证运行结果，新建一个html文件并将其build/main.js引入即可。

• 更多cli用法可以参考官网，和CLI的介绍。

配置文件方式

另一种是在项目中与npm命令一起使用，通过配置npm命令来调用webpack来使用指定的配置文件进行打包。

> mkdir webpack-demo
> cd webpack-demo
> npm init -y
> npm install webpack webpack-cli --D

• 在项目中填充示例代码
• 运行npx webpack

执行上上面的操作后，就会在项目的根目录生成打包后的dist文件夹。这里虽然没有通过命令脚本参数和配置文件的方式给webpack设置打包参数，但webpack依然能够对项目进行打包，原因是webpack会使用默认配置打包项目