webpack5打包基础知识

1. webpack基本使用

1. webpack在开发模式下仅能编译js中的ES语法；在生产模式下能够编译ES语法和压缩js代码
2. webpack会以一个或者多个文件为入口进行打包
3. 基本使用

1. 安装包：npm i webpack webpack-cli
2. 使用默认配置 npx webpack 入口文件路径./src/main.js --mode=development|production 

npx webpack 是用来运行本地安装webpack包的
指定入口文本

2. webpack基本配置

entry：入口  指定webpack从哪个文件开始打包
output：输出   指定webpack打包完的文件输出到哪里去，如何命名等
loader：加载器 webpack本身只能处理js或者json等资源，其他资源要靠loader和webpack进行解析
plugins：插件 扩展webpack的功能
mode：模式 开发模式development | 生产模式 production

2.1 webpack.config.js基本配置

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        // 文件输出的路径
        // __dirname Nodejs的变量，代表当前文件的文件目录（BASIC_WEBPACK）
        path: path.resolve(__dirname, 'dist'), // 绝对路径
        filename:'main.js'
    },
    plugins: [],
    mode: 'development',
    module: {
        rules:[],
    }
}

2.2 webpack处理样式资源

css-loader  负责将css文件编译成commonjs的模块，webpack能识别的模块到js中
style-loader会动态创建一个style标签，里面设置webpack中css模块内容

// 0. 创建css文件
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
// 1.想要webpack打包资源，必须引入该资源
import './css/index.css'
// 2. 配置css加载器
{
    test:/\.css$/i,
    use: ['style-loader', 'css-loader']
}
// 3.使用样式
<div class="box">111</div>

2.3 webpack处理less样式资源

less-loader  负责将less文件编译成css的模块
less

// 0. 创建css文件
.box1{
    width: 100px;
    height: 100px;
    background-color: deeppink;
}
// 1.想要webpack打包资源，必须引入该资源
import './less/index.less'
// 2. 配置less加载器
{
    test:/\.less$/i,
    use: ['style-loader', 'css-loader','less-loader']
}
// 3.使用样式
<div class="box1">111</div>

2.4 webpack处理scss|sass样式资源

sass-loader  负责将sass文件编译成css的模块
sass

sass和scss的区别就在于sass中没有{} scss中和less差不多

0. 安装sass和sass-loader
1. 在相关目录下配置样式
2. 在入口文件中导入样式 
import './sass/index.sass';
import './sass/index.scss';
3. 在webpac中配置文件
{
    test: /\.s[ac]ss$/i,
    // loader:''只能设置一个loader
    use: ['style-loader', 'css-loader','sass-loader']
},
4. 在html文件中使用样式
5. 使用npx webpack打包

// sass
.box2
  width: 100px
  height: 100px
  background-color: blue
//scss
.box3{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

2.5 webpack处理stylus样式资源

stylus-loader  负责将sass文件编译成css的模块
stylus

stylus中省略了{} 和：

// sass
.box4
  width 100px
  height 100px
  background-color red

2.6 图片文件转换

base64格式的图片
会将图片转换成字符串的格式，	这个字符串放在img标签的src中，浏览器就会识别图片。
优势：字符串格式的图片不用再发送请求（请求次数变少，服务器压力变小）
缺点：字符串格式的图片体积会变大
总结：一般图片体积小的就会选择将其转换成base64格式

{
    test: /\.(png|jpe?g|gif|webp|svg)$/i,
    type: 'asset',
    parser: {
        dataUrlCondition: {
            maxSize: 10*1024 // 文件小于这个尺寸的图片就会被打包成data64格式
        }
    }
}

2.7 修改输出文件夹的名称

1. 修改输出的js文件
   output: {
   // 所有文件输出的路径
   path: path.resolve(__dirname, ‘dist’), // 绝对路径
   // js文件打包输出文件名 js文件都会存储在 dist/static/js
   filename:‘static/js/main.js’
   },
2. 修改图像存储的位置
   module: {
   rules: [
   {
   test: /.(png|jpe?g|gif|webp|svg)$/i,
   type: ‘asset’,
   parser: {
   dataUrlCondition: {
   maxSize: 10*1024
   }
   },
   generator: {
   // 打包的图片存储在 dist/static/image
   hash值取前10位，ext是文件格式 query是查询参数
   filename:“static/image/[hash:10][ext][query]”
   }
   }
   ]
   }

2.8 修改字体图标及其他资源

1. 下载iconfont资源
2. 在项目中导入iconfont.css 和字体图标
3. 配置字体图标路径
4. 使用字体图标 class中配置 iconfont icon-xxx

  {
      test: /\.(ttf|woff2|woff|mp3|mp4|avi)$/i,
      type: 'asset/resource',
      generator: {
          filename:"static/resource/[hash:10][ext][query]"
      }
  }

2.9 处理js资源

webpack只能处理js中的es模块化语法，不能编译其他语法，导致hs不能在ie浏览器运行

js的兼容性处理-----babel
代码格式 ----- eslint
我们先完成eslint，检查代码格式无误后，再由babel做代码兼容性处理

Eslint

0. 安装eslint eslint-webpack-plugin
1. 增加eslint配置文件 .eslintrc.js
2.  增加eslintignore配置文件  里面就写目录

module.exports = {
    // 解析选项
    parserOptions: {
        sourceType: 'module', // es module
        ecmaVersion: 6 // es6
    },
    // 具体检查规则
    rules: {
        "no-var": 'error' // var声明就报错
    },
    // 继承其他规则
    extends: ["eslint:recommended"], // 官方的标准eslint
    env: {
        node: true,
        browser: true
    }
}

Babel

Babel是js的编译器
将es高级语法编译成向后兼容的js语法

0. 安装babel-loader @babel/preset-env  @babel/core
1.在webpack-config.js中配置babel解析信息
2. 增加babel.config.js 信息 

 {
     test: /\.js$/i,
     exclude: /node_modules/,
     loader: 'babel-loader',
     // options: {
     //     presets: ['@babel/preset-env']
     // }
 }

2.10 处理html资源

html文件中引入js文件在没配置相关设置的时候，都是手动加入。实现自动引入js的方式.
1. 安装html-webpack-plugin
2. 自动打包html文件的相关配置

const HtmlPlugin = require('html-webpack-plugin');
    plugins: [
        new HtmlPlugin({
            // 以public/index.html为模板
            template: path.resolve(__dirname,'public/index.html')
        })
    ],

2.11 搭建服务器

每次重新编译src下的文件，然后都要手动运行npx webpck 才能重新编译，为了实现自动编译，搭建一个开发服务器
安装包webpack-dev-server
开启服务器 npx webpck serve

    // 开发服务器，不会输出资源，在内存中编译打包 dist中内容不会再增加
    devServer: {
        host: 'localhost',
        port: '3000',
        open: true // 保存后会自动打开
    },

2.12 生产模式介绍

生产模式就是开发完成代码后没我们需要得到代码将来部署上线。
这个模式下要对代码进行优化
优化代码运行性能
优化代码打包速度

2.13 css文件单独打包成一个文件

1. 安装mini-css-extract-plugin
2. 在配置文件中导入
const MiniCSSPlugin = require('mini-css-extract-plugin');
3. 在生产模式下将所有style-loader都换成MiniCSSPlugin.loader
4. 添加插件，单独配置文件路径
 new MiniCSSPlugin({
     filename: 'static/css/main.css'
 })

2.14 css样式封装

function getStyleLoader(pre) {
    return [MiniCSSPlugin.loader, 'css-loader', pre].filter(Boolean);
}


module: {
        rules: [
            {
                test:/\.css$/i,
                use:getStyleLoader()
            },
            {
                test: /\.less$/i,
                // loader:''只能设置一个loader
                use: getStyleLoader('less-loader')// 可以设置多个loader
            },
            {
                test: /\.s[ac]ss$/i,
                // loader:''只能设置一个loader
                use:  getStyleLoader('sass-loader')// 可以设置多个loader
            },
            {
                test: /\.styl$/i,
                // loader:''只能设置一个loader
                use: getStyleLoader('stylus-loader')// 可以设置多个loader
            },
        ]
    }

2.15 css文件压缩

0. 安装 css-minimizer-webpack-plugin
1. const CSSMinimizerPlugin = require('css-minimizer-webpack-plugin');
2.  new CSSMinimizerPlugin()