webpack基础配置

已于 2022-06-18 20:16:25 修改
阅读量796 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack javascript 前端 vue.js react
于 2022-06-18 13:12:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45142260/article/details/125345042
版权

webpack基础配置-很全


本文是自学webpack的全过程，能够结合Vue、React框架直接使用，并且总结了关于webpack的代码优化内容，希望对您有帮助。
附上个人git仓库地址：https://gitee.com/zhaosir1/webpack_code.git

开发环境配置

  1. 在根目录创建config文件夹，里面分别创建webpack.dev.js（开发环境）和webpack.prod.js（生产环境）配置文件。

  2. 文件目录结构(仅用于测试webpack的配置)。
    文件目录结构

  3. webpack.dev.js文件配置。

const ESLintPlugin = require('eslint-webpack-plugin'); //语法检查插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //解析css的插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//压缩css的插件
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");//压缩图片的插件
const path = require('path') //处理路径
const os = require("os"); //获取cpu的内核数量，
const TerserPlugin = require("terser-webpack-plugin");//压缩js的插件
// 核数
const threads = os.cpus().length;
// 获取处理样式的loder (由于很多css的loader用法很相似，因此提取出公共部分代码)
function getStyleLoder(pre) {
  return [ //执行顺序从下到上
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre //如需使用其他loader可以通过传参的方式引入
  ].filter(Boolean) //过滤掉undefined
}
module.exports = {
  // 打包入口文件
  entry: './src/main.js',
  // 文件输出配置
  output: {
    // 输出路径
    // path: path.resolve(__dirname, 'dist'),
    // 开发环境没有输出-可以配置 undefined
    path: undefined,
    // 输出的文件名
    filename: 'static/js/[name].js',
    // 自动清空上传打包的资源
    // 开发环境没有输出打包资源所以不用配置
    // clean:true
    // 打包输出其他文件命名
    chunkFilename:'static/js/[name].chunk.js',
    // 图片 字体等通过type:asset处理资源命名方式
    assetModuleFilename:'static/image/[hash:10][ext][query]'
  },
  // 加载器
  module: {
    rules: [ //loder配置
      {
        oneOf: [{ //处理css文件
            test: /\.css$/,
            use: getStyleLoder()
          },
          {//处理less文件
            test: /\.less$/,
            use: getStyleLoder("less-loader")
          },
          {//处理sass scss文件
            test: /\.s[ac]ss$/,
            use: getStyleLoder("sass-loader")
          },
          {//处理styl文件
            test: /\.styl$/,
            use: getStyleLoder("stylus-loader")
          },
          {//处理图片资源
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 //小于10kb转base64格式 减少请求次数
              }
            },
            // generator: { //图片输出位置--开发环境无需配置
            //   filename: 'static/image/[hash:10][ext][query]'
            // }
          },
          { //处理字体图标音视频等其他资源文件
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
            type: "asset/resource",
            // generator: { //输出位置--开发环境无需配置
            //   filename: 'static/media/[hash:10][ext][query]'
            // }
          },
          { //处理js文件  解决低版本浏览器对js的兼容问题
            test: /\.m?js$/,
            // exclude: /(node_modules)/, //排除node_modules文件夹
            include: path.resolve(__dirname, '../src'), //只处理src文件夹下面的js文件(exclude|include 两者选择其一即可)
            use: [{
              loader: 'thread-loader', //开启多进程
              options: {
                works: threads //进程数量
              }
            },
            {
              loader: 'babel-loader',
              options: {
                // presets: ['@babel/preset-env']  //babel预设也可抽离出单独文件进行配置(babel.config.js)文件
                cacheDirectory: true, //开启babel缓存
                cacheCompression: false, //关闭缓存文件压缩
                plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
              },
            }
          ]
          }
        ]
      }

    ]
  },
  // 插件
  plugins: [
    new ESLintPlugin({ //代码检查
      context: path.resolve(__dirname, '../src'),
      exclude: 'node_modules', //默认值，排除node_modules文件夹
      cache:true, //开启缓存
      cacheLocation:path.resolve(__dirname,'../node_modules/.cache/eslintcache'),
      threads //开启多进程
    }),
    new HtmlWebpackPlugin({ //处理html文件 自动引入资源
      template: path.resolve(__dirname, '../public/index.html')
    }),
    new MiniCssExtractPlugin(),//解析css的插件
    
    // new CssMinimizerPlugin(),
    // new TerserPlugin({
    //   parallel:threads//开启多进程
    // })
  ],
  //webpack5之后 官方建议把处理文件压缩的插件放在optimization配置项里面
  optimization: { //压缩的操作也可以放着
    minimizer: [
      // 压缩css
      new CssMinimizerPlugin(),
      // 压缩js
      new TerserPlugin({
        parallel: threads //开启多进程
      }),
      // 压缩图片-按照官方写即可
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
    // 代码分割配置
    splitChunks: {
      chunks: 'all'
    }
  },
  // 开发服务器: 内存中运行
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, //开启HDM(热更新)
  },
  // 模式
  mode: 'development',
  // 用于配置soutceMap(源文件映射)，
  // 当代码报错时，能够清晰的显示出是具体对于源文件的哪一行报错
  devtool: "cheap-module-source-map",
}
  1. 由于使用到了eslint语法检查，所以还要在根目录创建.eslintignore文件（忽略不用检查的文件夹）和.eslintrc.js文件(语法检查配置项)
  2. .eslinignore文件,直接把需要忽略的文件夹名称放进去即可，和git的.ignore文件用法一样
  3. .eslintrc.js文件配置内容:
module.exports = {
  // 继承 Eslint 规则
  // 如需使用vue或者react 此处直接继承官方的写法即可 (vue-app|react-app)
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6, //es6
    sourceType: "module", //es module
  },
  // 如需重构，在下面配置即可覆盖
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
  plugins:['import'] //允许使用import关键词引入文件
};
  1. babel智能预设配置，在根目录创建babel.config.js文件：
module.exports = {
  presets: [
    //智能预设，能够编译ES6语法
    // 如果使用vue和react可以直接使用方法预设 presets:['react-app'] | presets:['vue-app']
    ['@babel/preset-env', {
      //usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。
      useBuiltIns: 'usage',
      corejs: 3 //确定corejs的版本
    }],
  ]
}
  1. 由于配置了浏览器的兼容，为了摒弃一些不常用的浏览器，要在package.json里面添加配置：
"browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],

“last 2 version"：兼容到浏览器最新的两个版本
“> 1%” :兼容99%的浏览器
“not dead”:摒弃已经废弃的浏览器

到此为止开发环境的webpack配置已经完成可通过命令：webpack serve --config ./config/webpack.dev.js进行开发环境的打包操作。

生产环境配置

  1. 在config文件夹创建webpack.prod.js配置文件：
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
const os = require("os");
const WorkboxPlugin = require('workbox-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
// 核数
const threads = os.cpus().length;
const path = require('path')
// 获取处理样式的loder
function getStyleLoder(pre) {
  return [ //执行顺序从下到上
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre
  ].filter(Boolean)
}
module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    // 输出路径
    path: path.resolve(__dirname, '../dist'),
    // 入口文件打包输出文件名
    filename: 'static/js/[name].js',
    // 自动清空上传打包的资源
    clean: true,
    // 打包输出其他文件命名
    chunkFilename:'static/js/[name].chunk.js',
    // 图片 字体等通过type:asset处理资源命名方式
    assetModuleFilename:'static/image/[hash:10][ext][query]'
  },
  // 加载器
  module: {
    rules: [ //loder配置
      {
        oneOf: [{
            test: /\.css$/,
            use: getStyleLoder()
          },
          {
            test: /\.less$/,
            use: getStyleLoder("less-loader")
          },
          {
            test: /\.s[ac]ss$/,
            use: getStyleLoder("sass-loader")
          },
          {
            test: /\.styl$/,
            use: getStyleLoder("stylus-loader")
          },
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 //小于10kb转base64 减少请求次数
              }
            },
            // generator: { //图片输出位置
            //   filename: 'static/image/[hash:10][ext][query]'
            // }
          },
          { //字体图标音视频等其他资源文件
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
            type: "asset/resource",
            // generator: { //输出位置
            //   filename: 'static/media/[hash:10][ext][query]'
            // }
          },
          { //处理js文件  兼容 todo
            test: /\.m?js$/,
            // exclude: /(node_modules)/, //排除node_modules
            include: path.resolve(__dirname, '../src'), //只处理src文件夹下面的js文件
            use: [{
                loader: 'thread-loader', //开启多进程
                options: {
                  works: threads //进程数量
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  //   presets: ['@babel/preset-env']
                  cacheDirectory: true, //开启babel缓存
                  cacheCompression: false, //关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                },
              }
            ]
          }
        ]
      }


    ]
  },
  // 插件
  plugins: [
    new ESLintPlugin({ //代码检查
      context: path.resolve(__dirname, '../src'),
      exclude: 'node_modules', //默认值，排除node_modules文件夹
      cache: true, //开启缓存
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
      threads //开启多进程
    }),
    new HtmlWebpackPlugin({ //处理html文件 自动引入资源
      template: path.resolve(__dirname, '../public/index.html')
    }),
    new MiniCssExtractPlugin({ //提取css成单独的文件
      filename: 'static/css/[name].[contenthash:10].css',
      chunkFilename: 'static/css/[name].chunk.[contenthash:10].css',
    }),
    // new CssMinimizerPlugin(),
    // new TerserPlugin({
    //   parallel:threads//开启多进程
    // })
    // js按需加载  缓存
    new PreloadWebpackPlugin({
      rel:'preload',
      as:'script'
      // rel:'prefetch'
    }),
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
  optimization: { //压缩的操作也可以放着
    minimizer: [
      // 压缩css
      new CssMinimizerPlugin(),
      // 压缩js
      new TerserPlugin({
        parallel: threads //开启多进程
      }),
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", {
                interlaced: true
              }],
              ["jpegtran", {
                progressive: true
              }],
              ["optipng", {
                optimizationLevel: 5
              }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      })
    ],
    // 代码分割配置
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: {
      name:(entrypoint)=>`runtuime~${entrypoint.name}.js`,
    }
  },
  // 开发服务器: 内存中运行
  // 生产模式不需要
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  // 模式
  mode: 'production',
  devtool: "source-map",
}
  1. 生产环境配置和开发环境配置大部分内容都是一样的。运行打包命令：webpack --config ./config/webpack.prod.js即可进行生产环境的打包操作
  2. 为了更方便打包，可在package.json文件进行命令的配置：
 "scripts": {
    "start": "npm run dev",
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },

即开发环境打包命令：npm start 或者 yarn start
生产环境打包命令：npm run build 或者 yarn run build

总结

1. 提升开发体验
  1. 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。
2. 提升 webpack 打包构建速度
  1. 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。
  2. 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。
  3. 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。
  4. 使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。
  5. 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）
3. 减少代码体积
  1. 使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。
  2. 使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。
  3. 使用 Image Minimizer 对项目中图片进行压缩，体积更小，请求速度更快。（需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。）
4. 优化代码运行性能
  1. 使用 Code Split 对代码进行分割成多个 js 文件，从而使单个文件体积更小，并行加载 js 速度更快。2. 并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。
  2. 使用 Preload / Prefetch 对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。
  3. 使用 Network Cache 能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。
  4. 使用 Core-js 对 js 进行兼容性处理，让我们代码能运行在低版本浏览器。
  5. 使用 PWA 能让代码离线也能访问，从而提升用户体验。

特别感谢：尚硅谷
本人webpack初学者，如有大神有高见随时求打扰，如有不解也可在评论区相互探讨相互进步。
给个小赞谢谢🤞🤞🤞🤞🤞

键盘上行走的猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack5基础
学过的东西，讲不出来等于没学。
05-21 452
前言 为什么需要打包工具？ 开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。 所以我们需要打包工具帮我们做完这些事。 除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 有哪些打包工具？ Grunt Gulp Parcel Webpack Rollup Vite … 目前市面上最流量的是 Webpack，所以我们主要以 Webpa
Webpack配置全解析（基础篇）
2401_85123750的博客
07-04 468
在上面的代码中我们发现都是手动来生成index.html，然后引入打包后的bundle文件，但是这样太过繁琐，而且如果生成的bundle文件引入了hash值，每次生成的文件名称不一样，因此我们需要一个自动生成html的插件；发现跟我们的源码差距还是挺大的，本来是一个简单add函数，通过webpack的模块封装，已经很难理解原来代码的含义了，因此，我们需要将编译后的代码映射回源码；在webpack2和webpack3中我们需要手动加入插件来进行代码的压缩、环境变量的定义，还需要注意环境的判断，十分的繁琐；
webpack基本配置
gwq_622的博客
11-19 272
vue-cli脚手架中webpack配置基础文件详解 webpack.conf.js entry ：入口文件地址，让webpack用哪个文件作为项目的入口 output 出口 让webpack把处理完成的文件放在哪里 module 模块 要用什么不同的模块来处理各种类型的文件 plugins 插件 用来配置需要用到的插件 resolve 用来设置路径指向   webpack打包原理 把所有...
webpack的基础配置
qq_42309685的博客
08-30 229
项目结构 依赖 (package.json) { "name": "webpackStart", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpackBaseConf/webpack.pr
前端路由&webpack基础配置详解
10-16
在现代前端开发中，路由管理和构建工具配置是两个不可或缺的核心话题。本文将深入探讨前端路由的工作...以上即为前端路由与webpack基础配置的详细解析。希望本文能帮助读者更好地理解前端路由及webpack配置的实际应用。
webpack基础配置教程
06-27
webpack基础配置教程
ltadpoles#web-document#webpack基础配置1
07-25
前言虽然一直在接触 webpack ，不过都是在项目开发时遇到问题去看看文档，并没有系统化地学习、消化。这篇文章将从 webapck 最基本的配置开始说起，直到
代码拆分和按需加载（CodeSplitting）：Webpack基础配置与使用.docx
最新发布
08-28
代码拆分和按需加载（CodeSplitting）：Webpack基础配置与使用.docx
webpack基础配置学习
peanut
12-17 240
一、webpack基础配置 安装webpack、webpack-cli(建议使用生产环境) npm i webpack webpack-cli --D 配置打包指令 // 使用全局webapck进行打包 命令行执行 npx webpack // 如果要使用项目下的webpack打包 可以使用以下指令 该指令会优先在项目路径下寻找webpack相关的依赖 npx webpack 然而更好的选择是在项目下生成一个包管理文件，统一对项目依赖进行管理： // 生成package
Webpack中的基本配置
D-的博客
01-14 6728
此节内容我们要对 webpack 的五大基本配置做一些了解。
Webpack基础配置
魑魅魍魉9527
08-31 164
创建项目文件 创建src 创建dist 创建webpack.config.js 在src下 创建index.html ！快捷初始化 ul>li*10{这是第$个li} 创建main.js //JS打包入口 //隔行变色 import $ from 'jquery'; $(function () { $('li:odd').css('backgroundColor', 'pink') $('li:even').css('backgroundColor', 'lightblue') }
webpack的基本配置
wangrong111222的博客
07-30 179
首先  安装react和webpack  然后建俩文件夹 build 和 client  build文件夹用来装一些webpack的配置文件； client文件夹 用来装一些 前端的文件 ；     在build中建一个webpack.config.js的文件；// npm run build 在client 文件夹下建俩文件 app.js 和App.jsx ;   write ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值