vue3+ts学习（五）：我的第一个webpack

先创建基础目录结构,注意，此时webpack默认打包入口文件为src/index.js，必须是这个名字不然会报错，后面是可以变更入口文件的,js文件夹是对应的模块导出

//format.js
const priceFormat = function(){
  return "¥99.8"
}
// CommonJS的导出
module.exports = {
  priceFormat
}

//math.js
// ES Module的导出
export function sum(sum1,sum2){
  return sum1+sum2
}

//index.js
// CommonJS的导入
const {priceFormat} = require("./js/format")
// ES Module的导入
import {sum} from "./js/math"

console.log(sum(1,2));
console.log(priceFormat());

第一步：在目标文件夹创建包管理工具package.json

npm init -y

第二步：在目标文件夹下载webpack

npm install webpack webpack-cli -D

第三步：修改package.json里的脚本，这里调用webpack会优先局部调用

修改完后执行指令打包 npm run build

之后得到的目录结构：dist里面是打包过后的js代码，可以创建一个index.html导入后在浏览器打开，控制台打印3和99.8

要想重写入口文件和输出文件的配置，我们需要创建一个webpack.config.js的文件，后续修改webpack配置的各种操作都是在这个文件内进行编写的

// node里面的模块
const path = require("path")

// 因为webpack是node.js开发的，所以只能用CommonJS模块
module.exports = {
  entry:"./src/main.js",  //入口文件，相对路径
  output:{
    //必须写绝对路径，导入path后，使用resolve进行路径拼接，__dirname可以获取当前文件所在路径
    path: path.resolve(__dirname,"./build"),  
    filename:"bundle.js"  //输出文件名
  }
}

此时打包后的目录如下：

这样自己的第一个webpack项目就搭建完成了！