初识webpack(二)解析resolve、插件plugins、dev-server

这篇具有很好参考价值的文章主要介绍了初识webpack(二)解析resolve、插件plugins、dev-server。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

(一)webpack的解析(resolve)

1.resovle.alias

2.resolve.extensions

3.resolve.mainFiles

(二) plugin插件

1.CleanWebpackPlugin

2.HtmlWebpackPlugin

3.DefinePlugin 

(三)webpack-dev-server

1.开启本地服务器

2.HMR模块热替换

3.devServer的更多配置项 


(一)webpack的解析(resolve)

解析(Resolve) | webpack 中文文档 | webpack中文文档 | webpack中文网

resolve用于配置模块如何被解析

webpack能解析的三种文件路径

  1. 绝对路径:已获得文件的绝对路径,不需要进一步解析。
  2. 相对路径:通过import/require中给的相对路径,来拼接上下文路径,生成该模块的绝对路径
  3. 模块路径:在resolve.modules配置中指定的所有目录中检索模块,默认从node_modules目录中查找模块。

确定路径是文件还是文件夹 

是文件:

  • 有扩展名:直接打包
  • 没有扩展名:根据resolve.extensions配置作为文件扩展名解析 

是文件夹:

在文件中根据resolve.mainFiles配置中指定的文件顺序查找

  • resolve.mainFiles配置默认文件名 index 
  • 再根据resolve.extensions配置来解析扩展名

接下来只详细写一下两个配置项,比较常用

1.resovle.alias

当文件目录很复杂时,使用相对路径../../这种形式进行引用会非常不直观不方便。

给常用的路径起一个别名,来确保模块引用变得简单

例如:给/src/utils文件夹取别名

/* 在webpack.config.js中 */
module.exports = {
    ...
    module: {
        /* resolve用于配置模块如何被解析 */
        resolve: {
            /* 为路径取别名 引入时更直观方便 */
            alias: {
                utils: path.resolve(__dirname, 'src/utils/')
            }
        }
    },
}

原来使用该模块路径引用情况:

import A from '../../utils/a'

现在使用该模块路径:

import A from 'utils/a'

2.resolve.extensions

webpack解析文件时不带扩展名,会自动根据resolve.extensions配置中的扩展名按照顺序进行匹配,能够使用户在引入模块时不带扩展 

默认值是 ['.wasm','.mjs','.js','.json'] 

可自行配置需要的扩展名

resolve: {
    /* 扩展名数组 */
    extensions:['.ts','.js','.wasm'] // 会自动覆盖默认数组
}

注意:会自动覆盖默认数组,可以使用'...'来添加默认扩展数组

resolve: {
    /* 扩展名数组 */
    extensions:['.ts','.js','.wasm','...']
}

3.resolve.mainFiles

解析目录时要使用的文件名

resolve: {
    mainFiles: ['index'],
  },

(二) plugin插件

plugin | webpack 中文文档 | webpack中文文档 | webpack中文网

loader:用于转换某些类型的模块

插件plugin:用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建一个插件实例。 

接下来详细写一些常用插件的使用方法

1.CleanWebpackPlugin

webpack打包生成文件夹后再运行打包不会将原来的文件夹全部删除,需要手动删除文件夹

该插件可以帮助我们直接删除原打包文件夹并重新生成

下载CleanWebpackPlugin插件:

npm i clean-webpack-plugin -D 

在webpack.config.js文件中进行插件配置:

// 局部引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    ...
    plugins: [
        // 使用插件
        new CleanWebpackPlugin()
    ]
}

现在,webpack官网plugins中不再记录有CleanWebpackPlugin插件,可以直接在output配置中设置 clean:true 即可

Output | webpack 中文文档 | webpack中文文档 | webpack中文网

output:{
    clean: true
}

2.HtmlWebpackPlugin

HtmlWebpackPlugin插件会在每次打包时在打包文件夹中自动生成html文件,

下载插件:

npm install --save-dev html-webpack-plugin

在webpack.config.js中进行配置:

// 为打包文件生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        // 使用插件
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 打包项目的标题
            title: 'dogeggWebsite',
            // html文件名 默认index.html
            filename: 'index.html',
            // 根据当下index.html文件的格式生成打包文件夹中的html 
            // 默认使用路径src/index.html的模板格式
            template: './src/index.html',
        })
    ]
}

更多该插件的配置项在官方文档中查看

3.DefinePlugin 

DefinePlugin | webpack 中文文档 | webpack中文文档 | webpack中文网

DefinePlugin插件允许在编译时创建全局常量使用,不需要额外下载

使用方法:

传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。

  • 如果该值为字符串,它将被作为代码片段来使用。
  • 如果该值不是字符串,则将被转换成字符串(包括函数方法)。
  • 如果值是一个对象,则它所有的键将使用相同方法定义。
  • 如果键添加 typeof 作为前缀,它会被定义为 typeof 调用。

在webpack.config.js中配置:

// 引入definePlugin
const { DefinePlugin } = require('webpack')

module.exports = {
    ...
    plugins: [
        new DefinePlugin({
            // 传入参数是键值对形式,引号内是js代码形式
            // 'BASE_URL': '"./"',
            BASE_URL: JSON.stringify("./")
        })
    ]
}

在src/index.html中使用该常量:

 <link rel="icon" href="<%= BASE_URL %> favicon.ico" type="image/x-icon">

打包到文件夹后效果:

<link rel="icon" href="./ favicon.ico" type="image/x-icon">

(三)webpack-dev-server

在开发模式中,希望对代码做出改动能够立即编译并展示,就像liveServer一样

因此,使用webpack的开发工具来完成这一效果

webpack 提供几种可选方式,帮助你在代码发生变化后自动编译代码:

  1. webpack 的 Watch Mode(观察模式)
  2. webpack-dev-server
  3. webpack-dev-middleware

下面使用webpack-dev-server来搭建本地服务器

1.开启本地服务器

webpack-dev-server 提供了一个基本的 web server,并具有实时重新加载的功能

下载:npm i webpack-dev-server -D 

在package.json里配置serve的便捷指令

"scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },

在webpack.config.js中对devServer配置项进行自定义的配置

devServer: {

}

在终端开启服务器:npm run serve

默认在端口8080开启 

初识webpack(二)解析resolve、插件plugins、dev-server,webpack,前端

2.HMR模块热替换

HMR 全称 Hot Module Replacement,翻译为模块热替换

模块热替换是指,在应用程序运行过程中,替换、修改、删除模块,而无需刷新整个页面

webpack-dev-server默认开启HMR

但还是会出现更改一个模块整个页面都刷新的情况:这就需要在入口文件main.js中对需要热替换的模块进行设置

/* 在入口文件中 */

// 如果HMR开启,就对对应模块进行热更新,并执行回调函数
if (module.hot) {
    module.hot.accept('./utils/a.js', () => {
        console.log('a模块已更新');
    })
}

再对a模块的内容进行修改就会发现,只更新了a模块内容 

初识webpack(二)解析resolve、插件plugins、dev-server,webpack,前端

3.devServer的更多配置项 

DevServer | webpack 中文文档 | webpack中文文档 | webpack中文网

这个不详细写了,需要用到的时候查阅就可以了 文章来源地址https://www.toymoban.com/news/detail-825825.html

到了这里,关于初识webpack(二)解析resolve、插件plugins、dev-server的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 手写一个webpack插件(plugin)

    熟悉 vue 和 react 的小伙伴们都知道,在执行过程中会有各种生命周期钩子,其实webpack也不例外,在使用webpack的时候,我们有时候需要在 webpack 构建流程中引入自定义的行为,这个时候就可以在 hooks 钩子中添加自己的方法。 创建插件 webpack 加载 webpack.config.js 中所有配置,此

    2024年02月08日
    浏览(45)
  • 使用webpack插件webpack-dev-server 出现Cannot GET/的解决办法

    文档地址深入浅出webpack 使用 DevServer运行webpack,跑起来之后提示 Cannot GET/ : 查阅官方文档 根据目录结构修改对应的配置: 然后就可以成功访问:

    2024年02月14日
    浏览(37)
  • 第3集丨webpack 江湖 —— 插件(plugin)的安装和使用

    webpack plugins 插件可以完成更多 loader 不能完成的功能。插件( plugin )的使用一般是在 webpack 的配置信息 plugins 选项中指定。 Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。 webpack-dev-server 可用于快速开发应用程序。类似于 node.js 阶段用到的 nodemon 工具,每

    2024年02月15日
    浏览(44)
  • webpack plugin源码解析(六) CompressionWebpackPlugin

    压缩打包后的文件,可以配置是否删除源文件 PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER:优化已有 asset 的转换操作阶段,例如对 asset 进行压缩,并作为独立的 asset additionalAssets: true 会多次调用回调,一次是在指定 stage 添加资产时触发回调,另一次是后来由插件添加资产时,这里为 Co

    2024年02月04日
    浏览(35)
  • webpack plugin源码解析(四) HashedModuleIdsPlugin

    将模块打包生成后的 id 变成 hash 值,用于生成稳定的模块 id 包括那些被使用过的模块和那些没有被使用过的模块。 表示该模块是否需要一个模块 id, 在 webpack 的编译过程中,有些模块可能不需要一个独立的模块 id,例如一些内置模块或者一些被动态加载的模块 根据 module 的

    2023年04月18日
    浏览(32)
  • 清理构建目标文件夹的两种方式:webpack配置选项 VS clean-webpack-plugin插件

    92. 清理构建目标文件夹的两种方式:webpack配置选项 VS clean-webpack-plugin插件 在 webpack 中, clean: true 是一项配置选项,而 clean-webpack-plugin 是一个插件。它们的作用是清理(删除)构建目标文件夹中的旧文件。 1. clean: true 配置选项: 在 webpack 的配置文件中,你可以使用 clean 配

    2024年02月11日
    浏览(45)
  • 十五、Webpack打包图片-js-Vue、Label命令、resolve模块解析

    为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两种: img元素,设置src属性; 其他元素(比如div),设置background-image的css属性; 这个时候我们打包会报错: 我们当前使用的webpack版本是webpack5: 在webpack5之前,加载这些资源我

    2024年02月09日
    浏览(38)
  • 新安webpack插件后编译报错compiler.plugin is not a function

            安装使用generate-asset-webpack-plugin时报错 TypeError:compiler.plugin is not a function ,网上搜索了一下大概就是webpack5与这些插件不匹配。推荐的方法几乎都是换一个适配的插件版本,但我所需要的这个插件在npm上最近更新时间是7年前💔。等不着作者适配于是决定自己改。

    2023年04月24日
    浏览(41)
  • 解决:项目名@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`错误

    当我们在githup/gitee下载前端的项目的时候,很多在自己的电脑运行,可能会爆这个错误,解决方案是: 第一步:先把这两个文件删掉 第二步:清理缓存 在项目文件目录下运行这个命令(在终端运行): npm cache clean --force 第三步:安装项目所需的所有依赖项 npm install 第四步

    2024年02月08日
    浏览(40)
  • webpack自动化打包webpack-dev-server

    在前面的章节中我们每次改完要打包的资源文件,和配置文件都是是输入 npx webpack 命令手动打包的,那么有没有什么办法可以 监听到我们代码的改动,在保存时就自动打包 呢? 答案是当然有,不然哪些框架的脚手架是怎么实现保存自动打包的呢,这就是本章要介绍的内容,

    2024年02月04日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包