手机网站被禁止访问怎么打开网页_公司团建拓展训练_外链购买交易平台_网络营销的作用

项目结构

|-- webpack|-- package-lock.json|-- package.json|-- src|-- main.js|-- js|-- complex_sum.js|-- simple_sum.js

创建文件

simple_sum.js

export default function baseSum(x, y) {return x + y;
}

complex_sum.js

export default function arraySum(...numbers) {return numbers.reduce((acc, curr) => acc + curr, 0);
}

main.js

import baseSum from './js/simple_sum'
import arraySum from './js/complex_sum'console.log(baseSum(1, 2))
console.log(arraySum([1, 2, 3, 4, 5]))

初始化项目

1. 打开终端，进入项目根目录。执行以下命令：

npm init -y

此时在项目根目录下会生成一个基础的package.json文件。
注意：
1. 项目根目录不能有空格或中文
2. package.json中name字段的值不能为webpack

2. 下载基础依赖

npm i webpack webpack-cli -D

启用Webpack

使用npx webpack命令运行本地安装的Webpack包。

npx webpack ./src/main.js --mode=none  ##node模式npx webpack ./src/main.js --mode=development  ##开发模式npx webpack ./src/main.js --mode=production  ## 生产模式

运行上述几种命令后，Webpack默认会将文件打包输出到dist目录下。
注意：每种模式最终输出的文件内容不一样。