Webpack是做什么的

Webpack的作用

1. 当前web开发面临的困境

   1. 文件依赖关系错综复杂
   2. 静态资源请求效率低
   3. 模块化支持不友好
   4. 浏览器对高级JavaScript特性兼容度较低

2. Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
   

3. 核心概念 :

   1. 入口(entry) :
      webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据
   2. 输出(output)
      出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
   3. 加载器（loader）
      webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
   4. 插件(plugins)
      插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率

4. 安装 : webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来.

   1. 语法 : npm install webpack webpack-cli --save-dev

Webpack的使用

1. 在项目中安装和配置webpack

   1. 运行npm install webpack webpack-cli -D命令, 安装webpack 相关的包

   2. 在根目录中, 创建名为webpack.config.js的webpack配置文件

   3. 在webpack的配置文件中, 初始化如下基本信息

      module.exports = {
      	mode: 'development'	//mode 用来指定构建模式
      }
      

   4. 在package.json 配置文件中的script节点下, 新增dev脚本

      "script": {
      	"dev": "webpack"	//script节点下的脚本可以通过npm run执行
      }
      

   5. 在终端中运行 npm run dev 命令, 启动webpack进行项目打包

Webpack的更多细节

1. 配置打包的入口和出口

   1. webbpack的4.0版本中默认约定:

      1. 打包的入口文件为 src -> index.js
      2. 打包的输出文件为 dist -> main.js

   2. 修改默认配置

      const path = require('path')
      module.exports = {
          mode: 'development',	//mode 用来指定构建模式
          entry: path.join(__dirname, './src/index.js'),  //入口文件, __dirname指文件的根目录
          output: {
              path: path.join(__dirname, './dist'),   //输出文件的路径
              filename: "build.js"    //输出文件的名称
          }
      }
      

2. 配置webpack的自动打包功能

   1. 运行npm install webpack-dev-server -D 命令, 安装支持项目自动打包的工具

   2. 修改 package.json -> scripts中的dev命令

      "script": {
      	"dev": "webpack-dev-server"
      }
      

   3. 将src->index.html中, script脚本的引用路径, 修改为’/build.js’

   4. 运行 npm run命令, 更新进行打包

3. 配置html-webpack-plugin生成预览页面

   1. 运行 npm install html-webpack-plugin -D 命令, 安装生成预览页面的插件

   2. 修改webpack-config.js文件头部区域, 添加如下配置信息

      const HtmlWebpackPlugin = require('html-webpack-plugin')
      const htmlPlugin = new HtmlWebpackPlugin({
      	template: './src/index.html',
      	filename: 'index.html'
      })
      

   3. 修改 webpack.config.js文件中向外暴露的配置对象, 新增如下配置节点

      plugins: [htmlPlugin ]
      

4. 配置自动打包相关的参数

scripts: {
	"dev": "webpacck-dev-server --open --host 127.0.0.1 --port 8089"
}

5. webpack中的加载器
   1. 通过loader打包非js模块
      1. webpack默认只能打包处理以.js后缀名结尾的模块, 其他非 .js后缀名结尾的模块, webpack默认处理不了, 需要调用loader加载器才可以正常打包, 否则会报错.
   2. loader加载器的使用
      1. less-loader 可以打包处理 .less 相关的文件
      2. sass-loader 可以打包处理 .scss 相关的文件
      3. url-loader 可以打包处理css中与url路径相关的文件
   3. 打包处理css文件

      1. 运行npm i style-loader css-loader -D命令, 安装处理css文件的loader

      2. 在webpack.config.js的module->rules数组中, 添加loader规则如下

         module: {
         	rules: [
         		{test: /\.css$/, use: ['style-loader', 'css-loader']}
         	]
         }
         

      3. 注意

         1. test表示匹配的文件类型, use表示对应要调用的loader
         2. use数组中自定的loader顺序是固定的
         3. 多个loader的调用顺序的从后往前调用
   4. 打包处理less文件

      1. 运行 npm i less-loader less -D 命令

      2. 在webpack.config.js的module -> rules数组中, 添加loader规则如下

         module: {
         	rules: [
         		{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
         	]
         }
         

   5. 配置postCSS自动添加css的兼容前缀

      1. 运行 npm i postcss -loader autoprefixer -D 命令

      2. 在项目根目录中创建postCSS的配置文件, postCSS.config.js, 并初始化下配置:

         const autoprefixer = require('autoprefixer')
         module.exports = {
         	plugins:[autoprefixer]
         }
         

      3. 在webpack.config.js的module -> rules数组中, 修改css的loader规则

         module: {
         	rules: [
         		{test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss -loader']}
         	]
         }
         

   6. 打包样式表中的图片和字体文件
      1. 运行 npm i url-loader file-loader -D 命令
      2. 在webpack.config.js 的module -> rules 数组中, 添加loader规则如下

         module: {
         	rules: [
         		{
         			test: /\.jpg |png |gif |bmp |ttf |eot |svg |woff |woff2$/,
         			use: 'url-loader? limit=16940' 
         			}
         	]
         }
         

   7. 打包处理js文件中的高级语法

      1. 安装bable转换器相关的包: npm i babel -loader @babel/core @babel/runtime -D

      2. 安装babel语法插件相关的包, npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

      3. 在项目根目录中, 创建babel 配置文件爱你 babel.config.js并初始化基本配置如下:

         model.exports = {
         	presets: [ '@babel/preset-env' ],
         	plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
         }
         

      4. 在webpack.config.js的 module -> rules 数组中, 添加loader规则如下:

         { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
         

Vue在Webpack中的使用

1. Vue单文件组件的基本用法
   1. 单文件组件的组成结构

      1. template 组件的模版区域

      2. script 业务逻辑区域

      3. style 样式区域 使用scoped关键字防止样式冲突

         <template>
             <div>
                 <h1>这是App的根组件</h1>
             </div>
         </template>
         <script>
             export default {
                 data() {
                     return {}
                 },
                 methods: {
                     
                 }
             }
         </script>
         <style scoped>
             h1 {
                 color: red;
             }
         </style>
         

2. webpack中配置vue组件的加载器

   1. 运行 npm i vue-loader vue-template-compiler -D 命令

   2. 在webpack.config.js配置文件中, 添加vue-loader的配置项

      const VueLoaderPlugin = require('vue-loader/lib/plugin')
      reules: {test: /\.vue$/, loader: 'vue-loader'}
      plugins: { new VueLoaderPlugin()  }
      

3. 使用Vue
   1. 运行 npm i vue -S 安装vue
   2. 在src -> index.js 入口文件中, 通过import Vue from 'vue’来导入vue构造函数
   3. 创建vue的实例对象, 并指定要控制的el区域
   4. 通过render函数渲染App根组件
4. 简单版的webpack打包

   1. 通过package.json文件添加命令

      "bulid": "webpack -p"