基于webpack搭建vue的开发环境

webpack概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

webpack核心概念

入口：entry：指向项目执行的主入口
出口：output 构建输出的文件路径和文件名
加载器：loader 转换webpack不识别的文件（资源）类型
插件：plugins 为了扩展webpack的功能，例如：清理文件，自动注入Html
模式：mode 切换开发环境(development)还是线上(production)环境

今天主要学习创建项目目录

初始化package.json
npm init -y

全局安装webpack和webpack-cli (安装过的这步可以忽略)
npm install webpack webpack-cli -g

项目内安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
简写模式 npm i webpack webpack-cli -D

.运行webpack测试

• CommonJS规范：基于服务端模块化规范，node产出
  抛出：modules.exports
  引入：require
• ES6 module
  import xxx from ‘’
  export default {}

webpack支持的文件类型
默认只支持JS和json文件的引入
注意： 如果在JS中要引入其他文件类型：.css,.png,字体文件或其他做任意文件类型，解析时都需求安装合适的loader来进行解析处理

webpack配置文件
默认配置文件名：
webpack.config.js
如果想运行其他配置文件:
webpack --config webpack.dev.config.js
配置文件是webpack的核心，所有的loader和插件环境，运行环境配置都在配置文件中配置使用
例如：

配置各种loader(文件解析器)

• 解析css的loader
• 解析图片 file-loader,url-loader
• 解析ES6/7/8/9/10… babel （举例）
  第一步下载：
  npm install --save-dev babel-loader @babel/core
  npm install @babel/preset-env --save-dev
  第二步：
  在项目根目录下创建一个.babelrc文件，并写入
  
  第三步：
  配置loader
  

自动清理文件

• 下载：
  npm install clean-webpack-plugin --save-dev
• 引入并创建一个配置对象
  

自动注入html
npm install --save-dev html-webpack-plugin

运行环境
webpack-dev-server

webpack 暂时告一段路 后续继续补充 不定时更新