Webpack教程-初次体验

项目结构

|-- 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目录下。
注意：每种模式最终输出的文件内容不一样。