webpack快速理解上手

webpack 是什么

就是前端模块化打包工具
把项目资源文件放在一个总的入口文件引入，根据对应的关系合并成一个 bundle.js 。打包后的 index.html 引入 bundle。

为什么需要webpack

为了加快网页响应速度，将资源打包到一个文件内，需使用webpack按需动态加载资源
为了优化性能，提升加载速度，把资源都合并到一个文件内后会发现

• 无法按需加载，所有资源一并加载耗时过长，性能反而降低
• 依赖库关系混乱，难以维护

使用webpack有同步和异步两种加载方式，正确配置后，可以进行按需加载，解决上述问题。

安装webpack

全局：npm install webpack -g
项目内：npm install webpack --save / npm install webpack --save-dev
webpack 是一个基于 node 的项目，先安装node

webpack配置

官方网址
vue.config.js文件中的简单配置

//引入 node 的 path 模块
const path = require('path')
module.exports={
    
    
 //指示用哪个模块构建其内部依赖图的开始。默认值是 ./src/index.js
 //但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点
 entry:'./src/main.js',
 output:{
    
    
  //修改 path 配置，把路径设置为当前项目根目录下。
  path:path.resolve(__dirname,'dist'),
 filename:'bundle.js'
 }
}

待补全…