webpack打包优化面试_什么是webpack

webpack打包优化面试_什么是webpackwebpack打包优化(polyfill/HappyPack/dllPlugin)

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

系列文章目录

webpack打包优化面试_什么是webpack


通过wabpack.config.js实现打包

  

  1. 刚开始要基本,开发模块,实现入口,出口打包 

  2. 后来实现html,抽离css文件输出打包输出

  3. 正常实现es6转换es5
  基本实现效果查看webpack官网达到实现效果


一、通过实现减少查找路径来实现优化?

  

//某个路径 配置别名 优化
  resolve: {
    alias: {
      "@": "",
   },

二、通过多线程工作来优化

 首先需要引入一包 happypack,在plugins中配置

const HappyPack = require("happypack");
//os是自带的
const os = require("os");
//获取自己电脑的cpu
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

plugins: [
    new HappyPack({
      //用id来标识 happypack处理那里类文件
      id: "happyBabel",
      //如何处理  用法和loader 的配置一样
      loaders: [
        {
          loader: "babel-loader",
          //options es6转换为es5 必须写这里
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      ],
      //cache已配置属性
      cache: true,
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
 }),
]

   

三、通过平常咱写的代码中有引入未使用的情况下实现未使用的话就不打包来实现优化(dllPlugin)

webpack打包优化面试_什么是webpack

//第三方动态链接库(专门去做第三方包抽离) 弄成cdn链接 dllplugins
const webpack = require("webpack");
plugins: [
     new webpack.DllReferencePlugin({
      context: __dirname,
      //判断后知晓那些文件不需要打包
      manifest: require("./dll/vendor.manifest.json"),
    }),
]

重点!!!! webpack版本匹配 webpack中package.json中版本

 webpack打包优化面试_什么是webpack


总体代码:

//path 拼接路径
const path = require("path");
//清除 每次只显示一个
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//html 显示
const HtmlWebpackPlugin = require("html-webpack-plugin");
//build出css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//抛出 node js规范
//eval 传入一个字符串 书写js逻辑 游览器需要解析的文件
//hash 20几位 :8 后面显示8位 每次没有发生改变 不会改变 解析内容改变 hash值跟着改变
//html HtmlWebpackPlugin处理
//polyfill 处理promise js

//多线程
const HappyPack = require("happypack");
//os是自带的
const os = require("os");
//获取自己电脑的cpu
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

//第三方动态链接库(专门去做第三方包抽离) 弄成cdn链接 dllplugins
const webpack = require("webpack");

module.exports = {
  //开发模式
  mode: "development", //production //生产环境
  //入口 垫片 js转换
  entry: ["@babel/polyfill", path.resolve(__dirname, "./src/main.js")],
  //出口
  output: {
    //出口路径
    path: path.resolve(__dirname, "./build"),
    //出口文件名
    filename: "[name].[hash:3].js",
  },
  //每个模块
  module: {
    rules: [
      //SASS MiniCssExtractPlugin并处理css
      {
        test: /.scss$/,
        //先写style-loader 从后往前解析
        use: [
          // 将 JS 字符串生成为 style 节点
          MiniCssExtractPlugin.loader,
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          //兼容 只能在css后
          {
            loader: "postcss-loader",
          },
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      //解析js 把es6转换为es5
      {
        test: /.js$/,
        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: "happypack/loader?id=happyBabel",
        //排除node_modules 目录下的文件
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    //清楚多余文件 只显示一个文件
    new CleanWebpackPlugin({
      path: "./build",
    }),
    //html
    new HtmlWebpackPlugin({
      //模板 生成已谁为模板的html
      template: path.resolve(__dirname, "./public/index.html"),
    }),
    //css
    new MiniCssExtractPlugin({
      filename: "[name].css", //输出的css文件名,默认以入口文件名命名(例如main.css)
    }),
    //多线程工作
    new HappyPack({
      //用id来标识 happypack处理那里类文件
      id: "happyBabel",
      //如何处理  用法和loader 的配置一样
      loaders: [
        {
          loader: "babel-loader",
          //options es6转换为es5 必须写这里
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      ],
      //cache已配置属性
      cache: true,
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      //判断后知晓那些文件不需要打包
      manifest: require("./dll/vendor.manifest.json"),
    }),
  ],
  //某个路径 配置别名 优化
  resolve: {
    alias: {
      "@": "",
    },
  },
};

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180058.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • date转换为localdatetime_java datetime

    date转换为localdatetime_java datetimeDate和LocalDate的转换Date和LocalDate的转换需要借助Instant时间戳importjava.time.Instant;importjava.time.LocalDateTime;importjava.time.ZoneId;importjava.util.Date;publicclassDemo5{publicstaticvoid…

    2022年10月3日
    3
  • Android studio 入门教程(案例)

    Android studio 入门教程(案例) 1.创建一个Android项目,点击File->New->NewProject,其中的open是打开一个Android项目2.输入项目的名称test,此项目放在E盘下,然后点击Finish3.选择Android虚拟机的版本,版本越低运行起来越快,其他的无需勾选。 4.选择Android的模板,选择基础类android的空模板Empty…

    2022年6月7日
    36
  • 模拟退火算法的原理+应用

    模拟退火算法的原理+应用本文转自 https www cnblogs com ranjiewen p 6084052 html 模拟退火算法 nbsp nbsp nbsp 著名的模拟退火算法 它是一种基于蒙特卡洛思想设计的近似求解最优化问题的方法 nbsp 一点历史 如果你不感兴趣 可以跳过 nbsp nbsp nbsp 美国物理学家 N Metropolis 和同仁在 1953 年发表研究复杂系统 计算其中能量分布的文章 他们使用蒙特卡罗模拟法计算多分子系统中分子的能量分

    2025年9月15日
    0
  • pycharm断点调试教程_pycharm怎么debug

    pycharm断点调试教程_pycharm怎么debug前言如果你不会用IDE开发工具的debug,你在调试代码的时候可能会用print输出去调试,那样效率比较低。我们可以用Pycharm的debug来调试,当然如果你用的Jetbranis的其他产品,操作方法也是一样的。Pycharm的Debug(1)开启debug的方式:右键debug项目 工具栏的甲壳虫(2)常用按钮图解debugger栏:stepover(单步调试)程序代码越过子函数,但子函数会执行,且不进入。 stepinto(进入)在单步执行时,遇到子函数就进入.

    2022年8月26日
    7
  • Python爬虫实战——搭建自己的IP代理池[通俗易懂]

    Python爬虫实战——搭建自己的IP代理池[通俗易懂]如今爬虫越来越多,一些网站网站加强反爬措施,其中最为常见的就是限制IP,对于爬虫爱好者来说,能有一个属于自己的IP代理池,在爬虫的道路上会减少很多麻烦环境参数工具详情服务器Ubuntu编辑器Pycharm第三方库requests、bs4、redis搭建背景之前用Scrapy写了个抓取新闻网站的项目,今天突然发现有一个网站的内容爬不下来…

    2022年5月11日
    56
  • navicate 15 激活码(JetBrains全家桶)

    (navicate 15 激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZP…

    2022年3月20日
    101

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号