webpack5快速使用

webpack(基于配置文件)

1. 流行的前端项目构建工具(打包工具),可以解决web开发中面临的困境

2. webpack提供了模块化支持,以及代码压缩混淆.js兼容问题,性能优化等强大的功能,从而让工作的中心放在功能的实现上,提高开发效率和项目的可维护性

3. 它的优点也很明显

     1. 拥有**依赖管理**、**动态打包**、**代码分离**、**按需加载**、**代码压缩**、**静态资源压缩**、**缓存**等
   

   2. webpack 扩展性强，插件机制完善，开发者可自定义插件、loader
   3. webpack 社区庞大，更新速度块

四个核心

1. 入口(entry)

   1. 入口是指依赖关系图的开始，从入口开始寻找依赖，打包构建

      entry: '入口文件地址',
      

2. 输出(output)

   1. 用于配置 webpack 构建打包的出口，如打包的位置，打包的文件名

      output: {
          path: path.resolve(__dirname, 'dist'),//位置
          filename: 'index.js',//文件名
        },
      

3. loader(加载器)

   1. loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块 ，以供应用程序使用，以及被添加到依赖图中

   2. webpack 自带 JavaScript 和 JSON 文件的打包构建能力，无需格外配置

   3. 而其他类型的文件，如 CSS、TypeScript，则需要安装 loader 来进行处理

       module: {
          rules: [
               {
                     test: /\.js$/,
                      use: {
                          loader: 'babel-loader',
                          options: {
                              presets: ['@babel/preset-env']
                          }
                      }
                 }
          ],
        },
      

4. 插件(plugins)

      1. webpack 自带 JavaScript 和 JSON 文件的打包构建能力,如果要解析其他文件
        		2. 
   

模块化

​ 在 webpack 中一切皆模块，js、css、图片、字体都是模块，而且支持静态解析、按需打包、动态加载、代码分离等功能，帮助我们优化代码，提升性能

​

配置示范

mode(模式)

​ webpack5提供了模式选择,(开发模式,生产模式,空模式)对不同的模式做不同的内置优化,可以通过配置模式让性能优化

module.exports = {
    mode:"development"
}

resolve(解析)

resolve用于设置模块如何解析

• alias:别名
• extensions:引用模块时不添加后缀
• symlinks:配置 npm link 是否生效,禁用可提升编译速度

resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.d.ts'],
     alias: {
       '@': paths.appSrc,
     },
     symlinks: false,
 }

optimization优化

optimization 用于自定义 webpack 的内置优化配置，一般用于生产模式提升性能

• minimize：是否需要压缩 bundle；
• minimizer：配置压缩工具，如 TerserPlugin、OptimizeCSSAssetsPlugin；
• splitChunks：拆分 bundle；
• runtimeChunk：是否需要将所有生成 chunk 之间共享的运行时文件拆分出来

optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
      // 重复打包问题
      cacheGroups:{
        vendors:{ //node_modules里的代码
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          name: 'vendors', //chunks name
          priority: 10, //优先级
          enforce: true 
        }
      }
    },
  },

练习配置

//webpack基本配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin依赖
const { VueLoaderPlugin } = require('vue-loader/dist/index');//引入解析vue文件的依赖
module.exports = {
    // 打包模式
    mode: 'development',
    // 入口文件
    entry: './src/main.js',
    // 输出文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            //处理vue文件
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            },
            // es6转es5
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            //处理css样式
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            //处理less文件
            {
                test: /\.less$/,
                use: [
                    'style-loader',//将 JS 字符串生成为 style 节点
                    'css-loader',//将 CSS 转化成 CommonJS 模块
                    'less-loader'// 将 less 编译成 CSS
                ]
            },
            //解析图片
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader', //只使用一个loader的使用可以这样写
                options:{
                  publicPath:'./img',//相对打包后index.html的图片位置
                  //输出到build中的目录img下
                  outputPath:'img/',
                //图片大小小于24kb,就会被base64处理，实际上8-12kb的图片比较适合用成base64
                  limit:25*1024,
                  //默认文件名
                }     
              },
        ]
    },
    plugins: [
        //简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            //压缩配置
            minify: {
                collapseWhitespace: true, // 去掉空格
                removeComments: true // 去掉注释
            }
        }),
        new VueLoaderPlugin()
    ]
}

//package.json
{
  "name": "vue3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "webpack": "webpack"
  },
  "dependencies": {
    "sass": "^1.41.0",//scss环境
    "sass-loader": "^12.1.0",//scss加载器
    "vue": "^3.2.11",
    "vue-loader": "^16.5.0",
    "vue-router": "^4.0.11",
    "url-loader": "^4.1.1",
    "vuetify": "^2.5.8"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@vue/compiler-sfc": "^3.2.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",//会生成一个html文件设为头文件并引入依赖
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "style-loader": "^3.2.1",
    "vite": "^1.0.0-rc.13",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0"
  }
}

常用插件和加载器

• style-loader用于在 DOM 中加载样式表
• css-loader加载import的css文件
• babel/core，实际的引擎
• @babel/preset-env用于将ES6+编译为 ES5 的
• babel-loader用于 webpack