手把手教你打包代码----webpack

webpack基本概念

webpack本质是, node的一个第三方模块包, 用于打包代码;

现代 javascript 应用程序的 静态模块打包器 (module bundler)

webpack能做什么

功能:
   1.压缩,合并,打包 
   2. 语法转换

•         高版本===>低版本(降级兼容)
•         less/sass -> css

   3. 监听代码变化,自动打包和更新
   4. 提取vue中的html/.css/js文件

作用:

1.减少文件数量;

2.缩减代码体积;

3.提高浏览器打开的速度;

新建webpack的步骤:

1.初始化--package.json
        

yarn init

 2.下载webpack等模块包
    

    yarn add webpack webpack-cli -D

    3.在package.json自定义命令,为打包做准备
 

      scripts: {
    "build": "webpack"
}

    4.新建目录src,在src文件夹下建立index.js文件---该文件为,默认入口  ./src/index.js

    5.新建业务文件,并定义执行函数(js代