webpack的使用

一、Webpack

Webpack 是一个前端资源加载/打包工具(模块打包机)。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

如图下，Webpack 可以将多种静态资源css文件、图片资源、js文件等进行整合，转换成统一的js、css、jpg、png文件，减少了页面的请求。

webpack的优点

背景

如今我们的网页功能丰富，它们拥有着复杂的JavaScript代码和一大堆依赖包。开发者为简化开发的复杂繁琐的过程，对程序进行以下处理：

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
• scss，less等CSS预处理器

webpack对文件进行处理分类打包，简化了复杂的手续，大大的提高了我们的开发效率。

二、Webpack的配置

• 创建文件夹myWebpack
• 初始化node.js
  • npm init -y
• 安装webpack模块
  • npm i webpack webpack-cli --save-dev
• 创建dist和src文件夹
• 模块安装好了，就可以使用npx webpack进行打包，可以生成一个main.js文件

三、webpack.config.js的配置

配置好后，我们就可以使用npx webpack --config webpack.config.js进行打包了
但是这样运行命令很长，不是很好记，所以我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：

这样的话，我们运行npm run build也可以达到同样的效果

四、webpack-dev-server自动打包

由于每次修改完数据都要重新打包，这样的话很麻烦，不利于开发。因此我们可以进行一下操作
安装npm install --save-dev webpack-dev-server模块
在webpack.config.js里面配置

同样我们可以再package.json 添加一个 npm 脚本(npm script)，设置一个快捷键

这样我们运行npm run start这样就可以实时打包了

五、webpack里面的vue整合

1.安装vue模块npm i vue
2.导入vue模块import Vue from "vue"
3.创建一个components文件，并添加一个vue文件，并导入vue模块
import weather from "./component/index.vue"
如果单纯就这样，那么就会报错

这面会报错，这样是因为我们还需要安装Vue Loader
解决方法
首先在安装npm install -D vue-loader vue-template-compiler
后面在webpack.config.js里面配置
导入const VueLoaderPlugin = require('vue-loader/lib/plugin')
这样，我们运行npm run start，就不会报错了