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

2022-11-03 10:39:32 浏览数 (1)

系列文章目录

通过wabpack.config.js实现打包

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

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

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

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

代码语言：javascript复制
//某个路径 配置别名 优化
  resolve: {
    alias: {
      "@": "",
   },

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

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

代码语言：javascript复制
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)

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

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

总体代码:

代码语言：javascript复制
//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.cn/180058.html原文链接：https://javaforall.cn

webpack javascript 打包 html https

0 人点赞