webpack4.0+简要

这篇具有很好参考价值的文章主要介绍了webpack4.0+简要。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、webpack简介

  webpack 是当下十分流行的一款静态模块打包工具,将JS、CSS、HTML、图片等各种静态资源视为一个个模块,通过一个或者多个入口文件通过解析依赖关系生成一个依赖图,最终打包成一个或者多个bundles,webpack本身只能打包JS文件,但是通过配置的loader和plugin可以打包Css和Html等其他格式的文件,本文基于webpack5为基础的,其中webpack4前后版本区别很大,使用时需要注意区别版本。

  webpack和glup、grunt的区别:webpack可以说是一种模块化解决方案,内嵌服务支持项目独立开发,同时可以打包单页面、多页面和提取公共模块以及处理图片文件。只打包被引用的文件,同时搭配强大的loader和plugin支持打包不同类型的语言,傻瓜式配置即可使用;grunt和glup则是基于任务式的打包工具,主要是用于编译CSS和JS,主要是用来合并、压缩和拷贝文件,不支持模块化打包。

二、配置详解

  常用配置概览

module.exports = {
 // 模式,webpack针对不同模式设置内部优化项,设置后会自动调起优化项
 mode: 'development',
  // 入口 可以配置为相对路径或者绝对路径
  entry: './src/index.js',

  // 输出文件名称和路径, 
  // path.reslove()返回一个绝对路径,__dirname当前文件的文件夹绝对路径
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 打包输出文件名
    filename: 'main.js',
    // chunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称。一般来说,这个 chunk 文件指的就是要懒加载的代码
    chunkFilename: '[id].js',
    // 下次打包时将上次打包目录下的资源清空
    clean: true
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  pulgins: [],
  // 模式
  mode: 'development',
  // 
  devtool: '',
  // 设置webpack如何解析模块,如别名、扩展名等
  resolve: {
    // 模块的后缀名,引入这些模块时不需要写扩展名,自动补充扩展名
    extensions: ['.js', '.json', '.css']
  },
  // 本地服务配置
  devServer: {
    // 指定端口
    port: 8000,
    // 是否开启模块热交换功能
    hot: true,
    // 是否自动在浏览器打开网页
    open: true
  },
  // 打包时排除编译该文件
  externals: {
    jquery: 'JQuery'
  },
  // 打包代码优化,进行公共代码提取,代码压缩,去除冗余代码等功能
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 打包文件大于30kb时会被分割
      minSize: 30 * 1024, 
      // 最大没有限制
      maxSize: 0,
      // 要提取的chunk最少被引用1次
      minChunks: 1,
      cacheGroups: {
        // node_modules下的文件会被打包到wendors中
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          // 优先级
          priority: -10
        },
        // 提取公共组件
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'),
          minChunks: 3,
          priority:10
        }
      }
    }
  }
}

  

  1. entry:打包入口,webpack打包从此处开始,通过解析依赖加载来构建依赖关系图,包含格式有包含格式有:string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] }),可以配置:

// 单入口单模块 
entry: './index.js',

// 多入口单模块(多个入口一个出口)
entry: ['./src/Component1/main.js', './src/Component2/main.js'],

// 多入口
entry:{ com1: './src/Component1/main.js', './src/Component1/main.js' },

// 接受通过函数方式返回配置 
entry: glob.sync('./src/**/main.js').reduce((acc, path) => {
  const entry = path.substring(path.indexOf('/src/') + 5, path.lastIndexOf('/main.js'));
  acc[entry] = path; return acc;
}, {}), 

  2. output:打包文件输出配置,支持设置entry对应的name、id、hash、contenthash,需要注意filename和chunkFilename的区别

filename: "[name].[id].[contenthash].[hash:7].js",

  3. mode:模式,内嵌development和production以及none三种模式,针对开发和生产两种场景内置不同的优化项,比如压缩、去除冗余代码等

  4. module:模块化配置,由于webpack只能解析JS,所以针对CSS、TS、SASS等无法解析的类型需要通过配置不同的loader进行处理编译。

    4.1 style-loader: 将编译完成的CSS样式挂载到style标签上,实际使用中一般放在第一位,因为loader都是从右到左,从下往上执行

// 解析CSS 
rules: [{
	test: /\.css/,
	use: ['style-loader']
}]

    4.2 css-loader:识别.css文件,处理CSS一般需要配合style-loader使用,否则样式不会生效,或者安装MiniCssExtractPlugin将文件单独打包

rules: [{
    test: /\.css$/,
    // use: ['style-loader', 'css-loader'],
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
    // 可以排除对应文件夹的内容按照该rule进行打包
    exclude: /node_modules/
}]

    4.3  sass-loader处理.sass类型样式文件、postcss-loader用于补充CSS样式在各个浏览器内核的前缀,不需要手动写

// 打包SASS
rules: [{
	test: /\.scss$/,
	use: [
	  'style-loader', 'css-loader', 'sass-loader', 'postcss-loader',
	],
	include: '/sc/'
}]

    4.4 bable-loader: 将ES6+语法转换为ES5语法。需要配合@bable/core 和bable/preset-env来使用

// 打包JS
rules: [{
  test: /\.js$/,
  use: {
	loader: 'bable-loader',
	options: {
	  presets: [[ 'bable/preset-env', { targets: 'defaults' } ]]
	}
  }
}]

    4.5 html-loader:将 HTML 导出为字符串。当编译器需要时,将压缩 HTML 字符串。

    4.6 file-loader:处理文件资源,比如jpg、png等图片

// 处理图片资源
rules: [{
  test: /\.(png|jpg|jpeg)$/,
  use:[
	{
	  loader: 'file-loader',
	  options: {
		name: '[name]_[hash:8].[ext]'
	  }
	}
  ]
}]

    4.7 url-loader:同样是处理图片资源,与file-loader不同的是可以根据tip的大小决定是否将图片生成Base64保存到JS文件里,方便快速加载

// 处理图片资源
rules: [{
  test: /\.(png|jpg|jpeg)$/,
  use:[
	{
	  loader: 'url-loader',
	  options: {
		name: '[name]_[hash:8].[ext]',
     // 当小于10kb时转换为base64打包到JS当中,否则保存为图片
     limit: 10240 } } ] }]

    4.8 其余还有vue-loader 加载和解析vue文件;eslint-loader 通过eslint检查JS代码;i18n-loader 加载多语言版本,支持国际化。

    注:官方loader查看地址  https://webpack.js.org/loaders/

      5. plugins: 插件,和loader一样是webpack的支柱功能,主要解决loader无法解决的问题,需要使用某个插件时,首先需要安装,其次引入文件到本地中,最后才能使用

    5.1 clean-webpack-plugin:打包前清理dist目录下的内容,避免再次打包时文件覆盖,之前的老文件遗留下来

    5.2 copy-webpack-plugin:拷贝某个目录下的文件到dist下的某个目录,

new CopyWebpackPlugin([
  // 将src目录下的内容拷贝到dist/common下
  { from: './src', to: './common' }
])

    5.3 html-webpack-plugin:生成html文件,以及自动引入打包好的css文件和JS文件(由于打包后的JS和CSS为了避免缓存都会动态生成文件名,所以每次打包手动引入比较麻烦)

// 单页面打包
new HtmlWebpackPlugin({ template: './index.html' }),

// 多页面打包
entry: {
  com1: './src/Component1/main.js',
  com2: './src/Component2/main.js'
},

plugins: [
    new HtmlWebpackPlugin({
	  // 使用模板
      template: path.join(__dirname, 'src/component1/index.html'),
	  // 打包后的文件名
      filename: 'com1.html',
	  // 和入口文件的key值相对应
      chunks: ['com1']
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/component2/index.html'),
      filename: 'com2.html',
      chunks: ['com2']
    })
],

  

    5.4  mini-css-extract-plugin:打包好的样式一般通过style-loader会插入大页面中,但是如果想要实现CSS分离生成单独的文件,可以通过这个组件实现,但是需要配合前文中的loader使用

rules: [{
	test: /\.css$/,
	use: [MiniCssExtractPlugin.loader, 'css-loader']
}],

plugins: [
    new HtmlWebpackPlugin({ template: './index.html' }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
],

    5.5 自定义组件AddAuthorPlugin开发和使用:

// 在plugin文件夹下新增一个add-author-plugin.js文件
// 其中apply是内置方法
class AddAuthorPlugin {
  constructor(options = {}) {
    this.author = options.author;
    this.date = options.date;
  }
  apply(compiler) {
    compiler.hooks.compile.tap('AddAuthorPlugin', (compilation, callback) => {
      console.log('***');
    })
  }
}

module.exports = AddAuthorPlugin;

// 使用的时候
const AddAuthorPlugin = require('./plugin/add-author-plugin');

new AddAuthorPlugin({ author: '张三', date: new Date() });

  打包时如何调测自定义组件:

  首先执行命令 node --inspect-brk .\node_modules\webpack-cli\bin\cli.js,然后在chrome浏览器中输入 chrome://inspect/#devices 回车后,点击 Open dedicated DevTools for Node 就可以进入调测模式,为了方便打断点,可以现在代码中设置debugger。详细步骤看录屏

 webpack4.0+简要

    注:官方plugin查看地址 https://webpack.js.org/plugins/

  6. devtool:已不同的方式打包文件,配置项总共有十几种,为了区分开发环境和生产环境,主要介绍下面几种

    6.1 开发环境推荐使用:

    eval:每个模块都使用eval执行,速度非常快,但是不会显示正确的行号,所以没法进行调试

    eval-source-map:,每个模式使用eval()执行,起初是缓慢的,但是重建的速度较快而且产生真是的文件,行号也被正确映射,产生的开发资源也是最优的。

    cheap-eval-source-map:每个模块也是经过eval执行,但是只映射了行号没有列,只显示与eval类似的被转换的代码。

    6.2 生产环境推荐使用:

    none:不触发sourcemap,性能最佳

    source-map:会生成一个完整的sourceMap作为一个单独的文件,为bundle添加了引用注释,因此开发工作知道如何找到它。

    hidden-source-map:与source-map类似,但不添加引用注释。

  7. devServer:方便前后端分离开发,一个本地服务

  8. optimization:打包优化,可以实现提取公共代码,代码压缩以及去除冗余代码等功能

三、常见问题

  1. chunk和bundle的概念:chunk是一个代码块,在构建的时候会根据入口文件和依赖关系生成多个chunk,bundle是指最后生成的文件,包含所有的chunk和模块

  2. vue中的webpack是如何使用的:当前通过vue-cli脚手架创建的Vue项目都内置了webpack的打包功能,基本不需要独立配置即可使用,如果更改配置项则需要在vue.config.js中配置

// 两种方式自定义webpack配置
configureWebpack: {
    rules: [],
    plugins: []
},

configureWebpack: (config) => {
    config.devtool = 'source-map';
    config.plugins.push(***);
}

  3. webpack的优缺点和其他组件(Vite)的对比:

    优点:模块化打包、零配置

    缺点:随着项目变大,模块化增多,启动时会逐渐变慢,热更新也会变慢

    Vite:由于打包原理和底层开发使用的语言不同,总体Vite打包和启动都要比webpack快很多,但是Vite生态不完善。

 文章来源地址https://www.toymoban.com/news/detail-747288.html

到了这里,关于webpack4.0+简要的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【控制篇 / 分流】(7.4) ❀ 01. 对指定IP网段访问进行分流 ❀ FortiGate 防火墙

    【简介】公司有两条宽带,一条ADSL拨号用来上网,一条移动SDWAN,已经连通总部内网服务器,领导要求,只有访问公司服务器IP时走移动SDWAN,其它访问都走ADSL拨号,如果你是管理员,你知道有几种方法可以实现吗?   静态路由 最简单的方法是通过静态路由对数据分流,但是

    2024年01月23日
    浏览(50)
  • 【控制篇 / 分流】(7.4) ❀ 03. 对国内和国际IP网段访问进行分流 ❀ FortiGate 防火墙

    【简介】公司有两条宽带用来上网,一条电信,一条IPLS国际专线,由于IPLS仅有2M,且价格昂贵,领导要求,访问国内IP走电信,国际IP走IPLS,那么应该怎么做?   国内IP地址组 我们已经知道可以创建地址对象和地址组,然后利用路由进行分流。 ① 浏览器打开网站  https://i

    2024年01月18日
    浏览(44)
  • 【控制篇 / 分流】(7.4) ❀ 02. 对不同运营商IP网段访问进行分流 ❀ FortiGate 防火墙

    【简介】公司有两条宽带用来上网,一条电信,一条联通,访问常用的某些网站速度时快时慢。领导要求,根据上网流量的目标运营商IP归属,将流量送到相应的运营商出口去,避免跨运营商上网。那么应该怎么做?   地址对象地址组 解决方案是:将运营商所属IP创建地址对

    2024年01月18日
    浏览(48)
  • Openwrt 分流-缓存-去广告

    ​ : openwrt, smartdns, adguardhome, openclash, 分流, 缓存, 去广告 目的: openclash 分流, smartdns 缓存DNS, adguardhome 去广告 设备及系统信息: 实现效果: 思路: smartdns 作为 openclash 上游服务器, openclash 作为 adguardhome 上游服务器 smartdns: 第一服务器 第二服务器 上游服务器 分组 CHINA 上游

    2024年02月01日
    浏览(64)
  • 浅谈当下火热的ChatGPT

            ChatGPT这个词语从今年初发布以来,一度成为一个火热的概念。包括CSDN也推出了C知道,不少大佬博友纷纷蹭热点,发布了无数关于ChatGPT的技术,使用,技能,展望未来的文档和博文。其实很多文章我都没有看过,只知道当下这个工具非常的火,火到每一个人都需

    2023年04月12日
    浏览(38)
  • OpenWRT 分流DNS的设置

    文章出处: OpenWRT 分流DNS的设置 · Issue #57 · luckyyyyy/blog 我自己根据实际需要基于上方的链接内容进行了相关补充 OpenWRT配置IPv6的方法参考如下文章: OpenWRT IPv6 NAT配置 目前还是有许多人喜欢设置DNS,虽然会浪费一些转发性能,但如果明白其中的链路关系,合理设置后,还是

    2024年02月05日
    浏览(64)
  • Flink之SideOutput(数据分流)

    Flink在早期版本有一个 split 算子用来做 数据分流 使用的,但是在 flink-1.12 开始这个 API 就已经被删除了,在 1.12 版本以后我们是通过 process 算子来做数据分流的,这里就介绍一下如何使用 prodess 进行数据分流. 代码 结果数据 通过结果内容可以看到数据完全按照我们分流的逻辑进

    2024年02月14日
    浏览(42)
  • 汇总当下的AI绘画模型

    AI绘画从今年过年那阵儿兴起,到现在(2023.8)已经半年过去了,涌现了很多风格迥异的模型,我在这里简单汇总一些。 一、写实人物类 1.1 AWPortrait 比较拟真的人物肖像 1.2  XXMix_9realistic 2.5D人物模型,因为画面带有一丝油画的感觉,可以制作古典风格的人物肖像,也是大家见的

    2024年02月13日
    浏览(59)
  • 短信网关通道对接及分流策略说明

    通道对接 通道管理 新增通道 进入 通道基本信息 通道基本信息说明: 通道帐号:上游提供的CMPP帐号 通道密码:CMPP帐号密码 通道名称:方便自己识别,自定义通道名 通道代码:可自定义 通道运营商类型:分全网、移动、联通、电信、国际,支持那个运营商选择哪个。 接口

    2024年02月13日
    浏览(39)
  • Flink多流转换(1)—— 分流&合流

    目录 分流 代码示例 使用侧输出流 合流 联合(Union) 连接(Connect) 简单划分的话,多流转换可以分为“分流”和“合流”两大类 目前分流的操作一般是通过侧输出流(side output)来实现,而合流的算子比较丰富,根据不同的需求可以调用 union、connect、join 以及 coGroup 等接口

    2024年01月24日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包