webpack记录

最新推荐文章于 2022-08-08 23:51:56 发布
最新推荐文章于 2022-08-08 23:51:56 发布
阅读量135 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45681557/article/details/104550924
版权

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

  1. 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
  2. 输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
  3. Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)
  4. 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
  5. 模式(Mode)指示 webpack 使用相应模式的配置。

初始化配置

  1. 初始化 package.json输入指令: npm init
  2. 下载并安装 webpack输入指令:
    npm install webpack webpack-cli -g
    npm install webpack webpack-cli -D

编译打包应用

  • 创建文件后
  • 开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development
  • 生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production
  • 能够编译打包 js 和 json 文件。 能将 es6 的模块化语法转换成浏览器能识别的语法。
  • 生产环境比开发环境多一个压缩js代码。

开发环境的基本配置

  • 创建文件 webpack.config.js
    webpack配置
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  }

loader配置
打包css，less

 module: {
    rules: [
      // 不同文件必须配置不同loader处理
      {
        // 匹配文件
        test: /\.css$/,
        // 使用loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  }

打包html
下载安装 plugin 包
npm install --save-dev html-webpack-plugin

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

打包图片

module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use表示
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 下载使用 url-loader 依赖file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  }
};

打包其他资源

module: {
    rules: [
      {
      // 打包其他资源(除了html/js/css资源以外的资源)file-loader
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  }

开发服务器 devServer

// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }

提取css

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader', 创建style标签，将样式放入
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

兼容处理css

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,//集合css文件
          'css-loader',
          /*
            css兼容性处理：postcss --> postcss-loader postcss-preset-env
            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
            "browserslist": {
              // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

压缩css

下载 npm ioptimize-css-assets-webpack-plugin -D ，添加调用即刻
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

new OptimizeCssAssetsWebpackPlugin()

js语法检查

module: {
    rules: [
      /*
        语法检查： eslint-loader  eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          设置检查规则：
            package.json中eslintConfig中设置~
              "eslintConfig": {
                "extends": "airbnb-base"
              }
           安装 airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,//忽略第三方
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },
  
// eslint-disable-next-line
下一行eslint所有规则都失效，不检查。

兼容性处理

module: {
    rules: [
      /*
        js兼容性处理：babel-loader @babel/core 
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill  直接在js文件引入import '@babel/polyfill';
            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
          3. 需要做兼容性处理的就做：按需加载  --> core-js
      */  
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',//忽略第三方
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',//基本兼容
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }

js和html压缩

 plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'

HMR

/*
  HMR: hot module replacement 热模块替换 / 模块热替换
    作用：一个模块发生变化，只重新打包这一个模块提升构建速度
      devServer内部添加hot = true
      样式文件：可以使用HMR功能：因为style-loader内部实现了~
      js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
        注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
        if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    print();
  });
}
      html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）
        解决：修改entry入口，将html文件作为第二个入口文件
        

*/

source-map

source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误)
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

调试更友好  eval-source-map 生产环境：源代码要不要隐藏?必须是外部 source-map

oneOf
loader只会匹配一个
注意：不能有两个loader处理同一种类型文件

缓存：
兼容js的loader内加入 cacheDirectory: true
开启babel缓存
第二次构建时，会读取之前的缓存

  • 文件资源缓存

  • hash: 每次wepack构建时会生成一个唯一的hash值。
    问题: 因为js和css同时使用一个hash值。
    如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

  • chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
    问题: js和css的hash值还是一样的
    因为css是在js中被引入的，所以同属于一个chunk

  • contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样
    –> 让代码上线运行缓存更好使用

tree shaking：去除无用代码减少代码体积

  1. 必须使用ES6模块化
  2. 开启production环境，会自动使用插件处理
  3. 可能会把css / @babel/polyfill （副作用）文件干掉
  4. 在package.json中配置 “sideEffects”: [".css", ".less"]

code split分件打包

1.多入口：有一个入口，最终输出就有一个bundle，可以js添加命名
2.oqtimization插件，可以将node_modules中代码单独打包一个chunk最终输出，
自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk。
3.单入口，同时添加插件通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包，可以添加注释命名。

懒加载和预加载

  • 正常加载可以认为是并行加载（同一时间加载多个文件）
  • 懒加载：当文件需要使用时才加载
  • 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  • 预加载兼容不好，只有在高版本了浏览器支持

pwa，离线可访问

  1. WorkboxWebpackPlugin插件安装，启动后内部两个设定
  2. eslint不认识 window、navigator全局变量，需要修改package.json中eslintConfig配置
    “env”: {
    “browser”: true // 支持浏览器端全局变量
  3. sw代码必须运行在服务器上

多进程打包
进程启动为600ms左右，进程通信也要时间。
只有工作消耗时间比较长，才需要多进程打包。
thread-loader可以设置进程数

externals

在js文件引入cdn文件jq
externals: {
// 拒绝jQuery被打包进来
jquery: ‘jQuery’
}

dll

  1. 使用dll技术，对某些库（第三方库：jquery、react、vue…）进行单独打包，避免重复打包，
  2. 运行 webpack.dll.js 文件，默认查找 webpack.config.js 配置文件，然后引入并打包，再暴露并输出。
  3. 安装插件webpack.DllReferencePlugin，告诉webpack哪些库不参与打包，同时使用时的名称也得变
  4. 安装插件AddAssetHtmlWebpackPlugin，某个文件打包输出去，并在html中自动引入该资源
续木
关注
专栏目录
干净的llinux环境中安装webpack记录
EMMA_1986的博客
07-26 724
webpack -v产看是否有webpack 确保没有安装过 出现的问题，开始逐步分析解决 先尝试本地安装 对于大多数项目，建议使用本地安装 npm install --save-dev webpack npm install --save-dev webpack@<version> 尝试配置淘宝源 安装本地webpack 1. 创建一个 webpack-demo 项目 mkdir webpack-demo 2. 先进入目录 cd webpack
webpack-gulp-logger:gulp 的 webpack 记录器
05-29
npm install --save webpack-gulp-logger 用法 var gulp = require ( 'gulp' ) ; var webpackConfig = require ( './webpack.config' ) ; var webpackLogger = require ( 'webpack-gulp-logger' ) ; gulp . task ...
Webpack：使用Loader打包样式（上）
oiaa的博客
03-19 238
css-loader作用 会分析出几个css文件之间的关系，最终把若干CSS文件合并成一段CSS style-loader 得到css-loader生成的CSS内容之后，style-loader会把这段内容挂载到页面的head部分 webpack.config.js const path = require('path'); //引入node核心模块 module.exports ...
Webpack记录
三岁打酱油的博客
11-16 176
Webpack是什么 webpack是一种模块化的打包方法，每一个文件都是一个模块使用id关联。它比grunt/gulp要强大很多，所以在很多项目中已经替代了其他的打包工具。 开始使用Webpack 1、安装(需要先安装node,npm) // 全局安装 (一般选择全局安装) npm install -g webpack // 安装到项目路径 npm install --save-dev web...
webpack学习记录
fangqi20170515的博客
08-08 325
Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。我们将 Webpack 输出的文件叫做bundle。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。........................
webpack踩坑记录
baiqin5390的博客
07-14 152
npm i babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime -D node_modules\.bin\webpack-dev-server 使用webpack-dev-server 要用反斜杠 webpack.config.js配置文件 const path = requir...
使用webpack报错记录
Vanllen_moon的博客
04-08 584
1.打包html资源时报错：TypeError: Cannot read property ‘thisCompilation’ of undefined at CommonJsChunkFormatPlugin.apply 查阅资料后，经尝试 降低compression-webpack-plugin版本，更新extract-text-webpack-plugin，均无法解决。 经尝试修改版本后得到解决，以下为修改后的版本号： （打开package.json可看到版本号） 执行的命令为： npm i we
webpack完整记录
haliofwu的专栏
10-18 834
碎碎念: 之前一直在csdn.总觉得csdn氛围不太好,但是因为懒嘛,一直没有迁移.今天波特问我,是否可将我的csdn账号借给他下点东西.我记得我csdn好几千积分的.结果一看,现在积分不能下载了,要靠c币.c币是什么呢?一个c币=300阅读量.这就算了,还有过期机制.一段时间没用,就给清零了…这已经强制大家充币赚钱了…所以,果然是要倒闭了么. 正文 webpack入门文章 webpack入...
webpack dll优化记录
qq_21476953的博客
07-05 208
webpack dll优化记录 1、编写dll打包配置 // webpack.dll.js const path = require('path'); const webpack = require('webpack'); console.log('webpack dll start...') const dllPath = path.join(__dirname, 'dll'); module...
webpack个人笔记记录
weixin_54241625的博客
04-25 1349
webpack5 HMR 热模块替换，一个模块发生变化，只会重新打包这个模块，不是重新打包所有 这里webpack5是自动开启的HMR， 一般是在devlopment 模式下使用热更新来调试， 注意点, 在处理css，或者less文件的时候 用style-loader, 才能在源文件内修改样式，从而界面发生改变 { test: /\.css$/, use: ['style-loader',"css-loader"], }, { tes
学习webpack记录(一)
前端小贤
03-06 237
1.首先遇到一个坑：webpack hello.js hello.bundle.js 报错原因：webpack 4.1.0版可能不支持这种写法，换成webpack 3.8.1  转换成功！2.打包的时候，文件以数组的形式放在hello.bundle.js中3.require（js文件）可以打包，但是require(css文件)报错原因是没有相关的loader: css-loader : webpa...
详解webpack多页面配置记录
11-29
之前也写过webpack学习记录，项目中需要一个常用的webpack多页面配置，所以才动手，本着能写一行是一行的原则，开始了配置webpack之旅。 定目录结构 首先我只需要开发环境（包含自动更新）和打包环境，初定的目录...
一次Webpack配置文件的分离实战记录
12-09
前端自动化构建工具的出现，为前端人员带来了项目构建上的福音，成为每个前端工程师必回的技术栈，目前比较流行的Webpack以万物皆模块的思想构建我们的前端项目，同样也是笔者正在使用的一个前端自动化构建工具。...
考虑励磁控制系统的水热两区互联电力系统网络自动生成控制simulink.rar
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Python 实现BO-CNN-BiLSTM贝叶斯优化卷积双向长短期记忆网络数据多变量时间序列预测（包含详细的完整的程序和数据）
10-09
内容概要：本文详细介绍了如何使用 Python 和深度学习方法（包括卷积神经网络 CNN 与双向长短期记忆网络 BiLSTM 结合的 BO-CNN-BiLSTM）进行多变量时间序列的数据预测。内容涵盖了从数据准备到超参数优化的全过程，并提供了完整的代码实现和实例展示。 适用人群：机器学习初学者，尤其适合对时间序列预测感兴趣的深度学习爱好者、研究者、工程技术人员。 使用场景及目标：适用于需要对时间序列数据如股票价格、环境数据、医疗健康监控等领域做精准预测的情况。本教程可以帮助理解深度学习在网络模型优化方面的运用。 其它：文中还讨论了项目的注意事项，并指出了可能的方向性改进路径，比如增加模型解释能力、实际应用等
用于kpca降维，对于故障特征诊断具有重要的作用不能运行.rar
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Python 实现 INFO-ELM（向量加权算法优化极限学习机）进行多输入单输出回归预测（包含详细的完整的程序和数据）
10-09
内容概要：本文详细介绍了如何利用PYTHON实现INFO-ELM（一种加权优化极限学习机）来进行多输入单输出（MISO）回归预测的方法。其中包括数据生成、算法建模、权重迭代更新以及最终的效果评估等一系列过程，并附有可视化的结果比较。 适用人群：适合熟悉或正在学习机器学习基本理论，特别是有兴趣深入理解和应用ELM和加权回归算法的研究人员和技术人员。 使用场景及目标：适用于解决多个输入变量对应一个连续数值输出的实际预测问题，通过优化模型提升预测准确性和稳定性。 其他说明：文中还提供了进一步研究和改进的方向，如扩展隐含节点数量、改善权重调节方法及采用平行计算等方式提高预测质量。
005-基于51单片机的酒精测试设计
最新发布
10-09
请结合博客看 https://blog.csdn.net/weixin_41011452/article/details/140587967?spm=1001.2014.3001.5502
频率约束下电力系统干扰的鲁棒性 matlab代码.rar
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值