Vue Webpack学习

Webpack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块处理和使用

• 安装
  npm install webpack -g
  npm install webpack-cli -g

• 测试安装成功
  webpack -v
  webpack-cli -v
  

• 配置
  创建webpack.config.js配置文件
  entry（核心）: 入口文件，制定webpack用哪个文件作为项目的入口
  output（核心）：输出，制定webpack把处理完成的文件放置到制定路径
  module：模块，用于处理各种类型的文件
  plugins：插件，如热更新、代码重用等
  resolve：设置路径之指向
  watch：监听，用于设置文件改动后直接打包

• 使用webpack

1. 创建项目
   1.1 新建项目目录
   
   1.2 idea打开该目录，即创建了一个空的项目
   

2. 创建一个名为modules的目录，用于放置js模块等资源文件

3. 在modules下创建模块文件，如hello.js，用于编写js模块相关代码

• 暴露一个方法
  

4. 在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

• 需要一个main.js主程序引入暴露的方法
• 使用require引入hello对象
• 通过hello对象调用暴露的方法
  

5. 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

• module.exports：将模块打包导出（相当于maven的install命令，将程序打成jar包导出）
• entry：程序入口
• output：打包输出位置
• webpack命令打包
• 打包完会自动出现dist目录，放置打包后的js文件

打包前：

打包后：

6. 如何使用打包后的js文件

• 创建index.html，导入打包文件bundle.js
• 前端的模块化开发
  

7. 说明
   webpack --watch
   实时监听组件变化并打包，实现“热部署”