webpack基本使用

创建webpack_code文件夹

创建如下结构

count.js代码如下：

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

sum.js代码如下：

export default function sum(...args) {
  // return args.reduce((x,y)=>{ return x+y},0)  //相当于
  return args.reduce((x, y) => x + y, 0)
}

main.js代码：

import count from './js/count';
import sum from './js/sum';
//注意，这里只有js文件的引入，可以不用写.js后缀名
console.log(count(5, 2));
console.log(sum(1, 2, 2, 3, 4, 56, 7));

 index.html 代码：

<div>hello webpack!</div>
<script src="../src/main.js"></script>

  运行index.html发现控制台报错，这就需要使用webpack，首先下载包描述文件npm init -y  

，然后安装webpack包

npm i webpack webpack-cli -D  ，安装后 修改package.json入口文件main修改成src下的main.js，如下：

，执行webpack，命令： npx webpack ./src/main.js --mode=development 命令 打包完成后，生成dist文件夹，index.html文件修改引入的js文件路径为：‘./dist/main.js'，打开index.html完成了，控制台可以看到输出的结果了。
注意npx webpack ./src/main.js --mode=development 执行后打包的是开发模式

npx webpack ./src/main.js --mode=production 执行后，打包的是 生产模式。