Webpack安装方式、webpack-dev-server、html-webpack-plugin、各种loader、Babel、vue如何使用

Webpack起步

为什么使用webpack

1.网页引用的静态资源（JS,CSS,Images，字体文件，模板文件）多了以后会发起很多的二次请求

2.要处理错综复杂的依赖关系

什么是webpack

基于前端的一个项目构建工具，是基于Node.js的一个前端工具，可以对项目进行合并、压缩、精灵图、图片的Base64编码

webpack两种安装方式

运行npm i webpack -g全局使用webpack命令

项目目录

在终端中输入npm init -y生成package.json配置文件

• node_modules:执行cnpm i安装必要的包

• dist

  • bundle.js

    解决js文件中的依赖问题，可以将所有的js、css、vue等打包生成唯一一个bundle.js文件

• src:源代码

  • css
  • images
  • js

• main.js ： 项目的js入口文件，导入文件 ：import ** form **,由于ES6的语法浏览器解析不了，需要执行webpack .\sec\main.js .dist\bundle.js命令，将main.js文键解析成为bundle.js文件存入到dist目录下

• webpack.config.js : 通过Node中的模块操作，向外暴露了一个配置对象，此时执行webpack就可以自动执行将main.js解析成为bundle.js文件

  const path=require('path')
  module.exports={
       
      entry: path.join(_dirname,'./src/mian.js'),//入口文件
      output:{
       //出口文件
          path:path.join(_dirname,'./dist'),
          filename:'bundle.js'
      } 
  }
  

• package.json

• index.html

webpack-dev-server自动打包编译

第一种方式（推荐）

1. 运行 npm i webpack-dev-server - D下载工具，安装到项目的本地开发依赖

2. 注意，即使全局配置了webpack也需要本地安装webpack才能使用这个工具

3. webpack-dev-server帮我们生成的bundle.js文件托管到了电脑的内存中，并不是实际存在于物理硬盘，所以项目根目录看不到这个打包好的bundle.js

4. 在package.json配置文件中，找到“scripts",加入:

   “dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”

5. 执行 npm run dev 就能自动打开端口为3000，根目录下的页面内容，此时显示的页面是上述项目目录中的index。启用了hot可以执行时只更新少量的代码，减少不必要的刷新请求。

第二种方式（了解）

html-webpack-plugin

1. 自动在内存中根据指定页面生成一个HTML页面
2. 自动将打包好的bundle.js文件追加到正确的路径下面

在webpack.comfig.js文件中的 plugins 节点里面，加入：

const htmlWebpackPlugin=require('html-webpack-plugin')
new htmlWebpackPlugin({
   //创建一个在 内存 中生成HTML页面