Webpack5笔记

一、Webpack原理相关概念

树结构：在一个入口文件引入所有资源并形成依赖关系树状图
模块：可以是ES6模块、CommonJs或者AMD模块（对于webpack来说一切资源皆模块，不如css，img等等）
chunk：打包过程中被操作的模块文件叫chunk，比如异步加载一个模块就是一个chunk
bundle：最后打包后的文件叫做bundle，大多数是多个chunk的合集

二、安装与体验

初始化package.json文件
```
npm init -y
```

安装webpack和webpack-cli

npm install webpack webpack-cli -D // 开发时依赖 -D => --save-dev

指定打包模式

webpack --mode development // 指定模式 development为开发模式 production为生产模式

三、Webpack核心概念

entry 入口
1. 单入口 String格式指定一个入口文件，打包成一个chunk，chunk名称默认，输出一个bundle
```
entry: './src/js/index.js' // => 输出 main.js
```

多入口 Array格式指定多个入口文件，所有的入口文件打包成一个chunk，chunk名称默认，输出一个bundle
```
entry: ['./src/js/index.js', './src/js/cart.js'] // => 输出 main.js
```

多入口 Object格式指定多个入口文件，有几个入口文件则打包成几个chunk，chunk名称是key，并输出多个bundle
```
entry: {
   index: './src/js/index.js',
   cart: './src/js/cart.js'
}
// => 输出index.js 和 cart.js
```

多入口特殊用法指定多个入口文件，有几个入口文件则打包成几个chunk，chunk名称是key，并输出多个bundle

entry: {
  vendor: ['./src/js/jquery.js','./src/js/common.js'],
  index: './src/js/index.js',
  cart: './src/js/cart.js'
}
// => 输出vendor.js、index.js 和 cart.js

output 出口

mode 模式

development 开发模式
production 生产模式（线上）

  // webpack.config.js
  module.exports = {
    mode: 'production' // 指定模式
  }

loader
1. 打包CSS资源（css-loader和style-loader）
  
  css-loader作用：处理css中@import和url引入的外部资源
  
  style-loader作用：把样式插入到dom中。其原理是在head标签中插入一个style标签，并把样式写入到这个style标签的innerHTML里。
```
  // 1.下载
  npm install css-loader style-loader -D // 开发时依赖
  
  // 2.使用
  module:{
    rules:[
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 顺序是从右到左
      }
    ]
  }
```

打包Less和Sass资源

// 1.下载
npm install less less-loader -D // less-loader
npm install node-sass sass-loader -D // sass-loader

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

打包CSS中图片资源（url-loader和file-loader）

// 1.下载
npm install url-loader file-loader -D

// 2.使用
// 单个loader配置
module:{
  rules:[
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      loader: 'url-loader',
      options: {
        publicPath: './src/assets/images/', // 指定图片访问路径 => 
        output: 'images/' // 指定图片输出路径 => 生成dist/images/xxx.png
        name: '[name]_[hash:10].[ext]', // 指定输出的图片的名称
        limit: 1024 * 8 // 限制文件大小 8kb以下由 url-loader 处理打包成base64
      }
    }
  ]
}

// 多个loader配置
module:{
  rules:[
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      use: [
        {
          loader:'url-loader',
          options:{}
        },
        {
          loader:'file-loader',
          options:{}
        },
      ]
    }
  ]
}

打包HTML中图片资源（html-loader）

作用：打包后的html文件自动引用图片资源

// 1.下载
npm install html-loader -D

// 2.使用
module: {
  rules: [
    {
      test: /\.html$/,
      loader: 'html-loader',
    }
  ]
}

打包其他资源字体图标（file-loader）

直接输入其他资源，不通过处理

// 1.下载
npm install file-loader -D

// 2.使用
module: {
  rules: [
    {
      exclude: /\.(html|css|js|json|gif|png|jpeg|less|scss)$/,
      loader: 'file-loader',
      options: {
        publicPath: './font',
        outputPath: 'font/',
        name: '[name]_[hash:8].[ext]'
      }
    }
  ]
}

处理CSS浏览器兼容性问题

// 1.下载
npm install postcss-loader postcss-preset-env -D

// 2.使用
// 1) 在webpack.config.js的 loader 中配置
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['MiniCssExtractPlugin.loader', 'css-loader', 'postcss-loader']
    }
  ]
}

// 2）新建postcss.config.js文件
module.exports = {
  plugins: [
    require('postcss-preset-env')()
  ]
}

// 3）在 package.json 中写入 
{
  "browserslist": ["> 0.2%", "last 2 versions", "not dead"]
}

对js语法配置eslint进行检查

// 1.下载
npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

// 2.使用
// 1)在webpack.config.js中配置
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/, // 对第三方库文件不进行eslint检查
      loader: 'eslint-loader',
      options: {
        fix: true
      }
    }
  ]
}

// 2)在package.json中配置
"eslintConfig": {
    "extends": "airbnb-base" // 依赖aribnb-base包
 }

// 3在js文件添加 // eslint-disable-next-line 可对下一行eslint检查规则失效
// eslint-disable-next-line
console.log('该行eslint检查规则失效');

plugins 插件**

打包HTML资源 (html-webpack-plugin)
作用：复制指定HTML模板，并自动引入打包输出的js/css资源

  // 1.下载
  npm install html-webpack-plugin -D
  
  // 2.引入
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  // 3.使用
  new HtmlWebpackPlugin({
    template: './public/index.html', // 指定模板文件
    filename: 'index.html', // 指定html文件名称
    chunks:['index','vendor'], // 指定引入的文件
     // 压缩  
    minify: {
      collapseWhitespace: true, // 删除空格
      removeComments: true // 移除注释
    }
  })

提取CSS为单独文件 mini-css-extract-plugin

作用：提取单独CSS文件，并使用link标签引用该CSS文件

// 1.下载
npm install mini-css-extract-plugin -D

// 2.引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 3.使用
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css' // 指定css文件名
  })
]

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

压缩CSS文件内容 optimize-css-assets-webpack-plugin

作用：去掉css文件的空格以达到压缩效果

// 1.下载
npm install optimize-css-assets-webpack-plugin -D

// 2.使用
new OptimizeCssAssetsWebpackPlugin()

开发服务器devServer配置

devServer是开发过程中的服务器，使用了express的Http服务器，该http服务器和client使用了websocket通讯协议，其作用是监听资源文件的改变，一旦发生改变，它就会实时进行编译。

// 1.下载
npm install webpack-dev-server -D

// 2.使用
// 1)在webpack.config.js中配置
devServer: {
  // 告诉服务器内容的来源。仅在需要提供静态文件时才进行配置
    contentBase: path.resolve(__dirname, 'public'), 
    open: true, // 自动打开浏览器
    compress: true, // 开启gzip压缩
    host: '0.0.0.0', // 设置ip地址
    port: 3000, // 设置端口号
      
    // 开启模块热更新 Hot Module Replacement（默认只更新js文件）
    // css文件需要开启热更新则需要配置style-loader,
    // html文件则需要在entry引入html文件 entry: ['./public/index.html', './src/main.js']
    hot: true,
      
    // 设置跨域
    proxy: {
     '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        //pathRewrite方法重写url
        //pathRewrite: {'^/api': '/'} 重写之后url为 http://localhost:3000/xxx
        //pathRewrite: {'^/api': '/api'} 重写之后 http://localhost:3000/api/xxx
      },
    },
    // devServer 内部的 所有中间件执行之前的自定义执行函数
    before: (app, server, compiler) => {
      app.get('/users', (req,res) => {
        res.json({
          data: [
            {name: 'user1'},
            {name: 'user2'},
            // ...
          ]
        })
      })
    }
    // 指定捆绑的bundle文件的特定访问路径 默认 '/' （建议 devServer.publicPath 与 output.publicPath 相同）
    publicPath: '/assets/', // 假设output的filename为bundle.js 配置后则会访问http://localhost:8080/assets/bundle.js
}

// 在webpack.config.js中添加 target: "web" 解决webpack5无法自动刷新问题

// 2)在package.json配置运行脚本
  "scripts": {
      "serve": "webpack serve --mode development --port 3000",
      "build": "webpack --mode production"
  },

开发环境的优化
- 开启模块热更新，只更新修改的文件

生产环境的优化

通过tree-shaking去除实际没有使用到的js代码来减少体积（条件：1. 必须使用es6模块化 2. 开启production环境）
使用purgecss-webpack-plugin去除实际没有使用到的css代码来减少体积参考purgecss-webpack-plugin用法

  // 1.下载
  npm install purgecss-webpack-plugin -D
  
  // 2.使用
  // webpack.config.js
  const { join } = require('path');
  const PurgecssPlugin = require('purgecss-webpack-plugin');
  const glob = require('glob');
  
  const PATHS = { src: join(__dirname, 'public') } // 需要指定html所在的目录(坑)
  
  plugins: [
    new PurgecssPlugin({
        paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true })
    })
  ]

Webpack5笔记

一、Webpack原理相关概念

二、安装与体验

三、Webpack核心概念

你可能感兴趣的:(Webpack5笔记)