Webpack5配置学习笔记

前端小脑虎
134 阅读4分钟

一、Webpack原理相关概念

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

二、安装与体验

  1. 初始化package.json文件

    npm init -y

  2. 安装webpack和webpack-cli

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

  3. 指定打包模式

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

三、Webpack核心概念

  • entry 入口

    1. 单入口 String格式 指定一个入口文件，打包成一个chunk，chunk名称默认，输出一个bundle

      entry: './src/js/index.js' // => 输出 main.js

    2. 多入口 Array格式 指定多个入口文件，所有的入口文件打包成一个chunk，chunk名称默认，输出一个bundle

      entry: ['./src/js/index.js', './src/js/cart.js'] // => 输出 main.js

    3. 多入口 Object格式 指定多个入口文件，有几个入口文件则打包成几个chunk，chunk名称是key，并输出多个bundle

      entry: {
   index: './src/js/index.js',
   cart: './src/js/cart.js'
}
// => 输出index.js 和 cart.js

    4. 多入口 特殊用法 指定多个入口文件，有几个入口文件则打包成几个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 模式

    1. development 开发模式

    2. 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'] // 顺序是从右到左
    }
  ]
}

    2. 打包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']
    }
  ]
}

    3. 打包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:{}
        },
      ]
    }
  ]
}

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

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

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

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

    5. 打包其他资源字体图标 （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]'
      }
    }
  ]
}

    6. 处理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"]
}

    7. 对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 插件**

    1. 打包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 // 移除注释
  }
})

    2. 提取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']
    }
  ]
}

    3. 压缩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 serve --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 })
  })
]
avatar
文章
阅读
粉丝