一、webpack能做什么

• Webpack是一个静态模块打包器

• 语法转换

• (1)、Less/Sass/Stylus转换成css

• Html/css/js代码压缩合并（打包）

• webpack可以在开发期间提供一个开发环境

• (1)、自动打开浏览器

  (2)、保存时自动刷新

二、webpack基本打包配置

1、初始化：npm init -y

 2、安装依赖包

1. 、安装指令：npm i webpack webpack-cli -D

全局安装 ：npm i webpack -g

 3、到package.json文件中配置scripts

  "scripts": {
    "build": "webpack --config webpack.config.js"
  }

4、配置webpack.config.js文件

const path = require('path');

// 配置webpack的配置文件，需要配置的对象导出，给webpack使用
module.exports = {

    // 1、入口: entry,从哪个文件开始打包
    entry:'./src/main.js',

    // 2、出口：output，打包到哪里去
    output:{

        // 打包输出的目录（输出的目录必须是一个绝对路径）
        path:path.resolve(__dirname,'../dist'),

        // 打包后生成的文件名
        filename:'index.js'
    },

     // 模式 mode development未压缩的，production压缩的
     mode:'development',
}

5、打包指令：npm run build

        dist目录下就会生成一个index,js文件

6、自动生成html-webpack-plugin插件同步生成html模板

（1）、下载（--save-dev 是-D的缩写将依赖记录成开发依赖，只在开发阶段用，实际上线是不需要的）

npm i html-webpack-plugin -D

（2）、在webpack.config.js文件中，引入模块

// 引入自动生成html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

（3）、配置

// 5.配置自动生成html模板的路径
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' })
    ]

7、webpack中处理css文件

（1）、安装依赖

npm i style-loader css-loader -D

（2）、配置

// 4、配置module模块加载规则
    // webpack默认只认识json、javascript 不认识其他文件，如果希望打包处理其他文件，需要配置对应loader
    module: {
        rules: [
            // (1) 配置css文件的解析
            {
                test: /\.css$/i, // 配置所以以css结尾的文件
                // 实际处理顺序：从右到左
                // css-loader 让webpack能够识别解析css文件
                // style-loader 通过动态的创建style标签方式，让解析后的css内容，能够作用到页面中
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader'],
            }
        ]
    }

8、分离CSS文件（本插件会将CSS提取到单独的文件中，为每个CSS的JS文件创建一个CSS文件，并且支持CSS和SourceMaps的按需加载， 基于webpack 5新特性）

（1）、安装依赖

npm i mini-css-extract-plugin -D

（2）、配置

use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader'],

plugins: [
        // 定义打包好的文件的存放路径名称
        new MiniCssExtractPlugin({
            filename: 'css/index.css'
        })
    ]

9、处理LESS文件

（1）、装包

npm i less less-loader -D

（2）、配置

 module: {
      rules: [
           // (2) 配置less文件的解析
            {
                test: /\.less$/i, // 配置所以以less结尾的文件
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
        ]
    }

10、处理图片

（1）安装依赖

npm i url-loader file-loader -D

（2）配置

图片默认转为base64字符串

好处：就是浏览器不用请求可直接读取

坏处：就是图片太大再转就会让图片体积增大30%得不偿失。

 module: {
      rules: [
           // (3) 配置图片文件的解析 i 表示忽视大小写
            {
                test: /\.(jpg|png|gif)$/i, // 配置所以以jpg、png、gif结尾的文件
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 超过了 8K 就不转base64, 小于 8K 才转
                        limit: 8 * 1024,
                        // // 配置输出的文件名
                        name: '[name].[ext]',
                        // 配置输出的文件目录
                        outputPath: 'imgage',
                        esModule: false

                    }
                }],
                type: 'javascript/auto'
            }
        ]
    }

11、处理高版本的js语法

（1）、安装依赖

npm install -D babel-loader @babel/core @babel/preset-env

（2）、配置

 module: {
      rules: [
           // (4) 使用babel-loader处理高版本的js
            {
                test: /\.m?js$/,
                // 排除项
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }

12、清除dist目录的插件

（1）、安装依赖

npm i clean-webpack-plugin -D

（2）、配置

    plugins: [
        // 调用清除打包目录插件
        new CleanWebpackPlugin(),
    ]

13、保存时自动刷新

（1）、安装依赖

npm i webpack-dev-server -D

（2）、配置

module.exports = merge(base,{
     devServer:{
        port:8888, // 端口号
        open:true  // 是否自动打开
    },
})

14、区分生成环境 和 开发环境

（1）、安装依赖

npm i webpack-merge -D

（2）、拆分webpack.config.js文件

- webpack-demo
    - config                   // 存放配置文件的文件夹
        - webpack.base.js      // 公共的配置
        - webpack.dev.js      // 开发环境的配置
        - webpack.prod.js      // 生产环境的配置

（3）、合并包

// 生产环境
const base = require('./webpack.base'); // 引入基础配置
// 引入合并包
const { merge } = require('webpack-merge');

// 导出生产环境
module.exports = merge(base,{
     // 模式 mode development未压缩的，production压缩的
     mode:'production'
})

（4）、修改scripts

 "scripts": {
    "build": "webpack --config config/webpack.pro.js",
    "dev": "webpack-dev-server --config config/webpack.dev.js"
  },

15、vue-loader配置

Vue Loader是一个webpack的loader,他允许你以一种名为单文件组件的格式写的Vue组件

（1）、安装依赖

npm i vue-loader vue-template-compiler -D

（2）、配置

// webpack.config.js
const VueLaderPlugin = require('vue-loader/lib/plugin');
 
module: {
      rules: [
          {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },

plugins:[
    // 调用vue插件
    new VueLoaderPlugin()
]

16、webpack中路由的配置

（1）、安装依赖

npm i vue-router

（2）、配置

import Vue from "vue";
import VueRouter from "vue-router";
import home from "../views/home.vue";
import login from "../views/login.vue";

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {path:'/'},
        {path:'/home',component:home},
        {path:'/login',component:login},
    ]
})

export default router;

（3）、修改main.js

require('./css/index.css')
require('./css/base.css')
require('./less/header.less')
import Vue from 'vue'
import APP from './APP.vue'
import router from './router/index';
new Vue({
    render:h=>h(APP),
    router
}).$mount('#app')

17、rem布局 - 插件 postcss-pxtorem 的配置

（1）、安装依赖

npm i lib-flexible postcss-px2rem

（2）、在public中的index.html中移除<meta name=”viewport”>标签Flexible会动态生成

（3）、在src/main.js中导入插件包

// 导入rem的js, 动态的设置了，不用屏幕的html根元素的 font-size
import 'lib-flexible'

（4）、配置 vue.config.js

module.exports = {
    css:{
        loaderOptions:{
            postcss:{
                plugins:[
                    require('postcss-px2rem')({
                        // 适配375屏幕，设计图750中量出来的尺寸要 / 2
                        // 配置成37.5是为了兼容 没有适配的 rem 布局的第三方 ui 库
                        remUnit: 37.5
                    })
                ]
            }    
        }
    }
}

18、反向代理的配置说明

跨域：域名 端口 协议 不同，就会跨域

比如：前端本地开发和后端本地开发不同电脑会形成跨域

webpack的反向代理，可以起到一个临时的代理服务器，帮助解决在开发过程中的跨域

的问题，就算跨域了也能拿到后台的数据

（1）、devServer中配置proxy

module.exports = {
    devServer: {
        port: 9000,
        open: true,
        // 配置代理服务器，进行代理数据
        proxy: {
            // 前缀名，表示/api开头的都会被代理
            '/api': {
                // 代理的基础路径
                target: 'http://10.10.4.136:8069/',
                // 路径重写，会把路径上的 /api 替换成空
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}