初识webpack（二）解析resolve、插件plugins、dev-server

已于 2024-02-14 18:31:22 修改
阅读量1.7k 收藏 16
点赞数 20
文章标签： webpack 前端
于 2024-02-14 18:30:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DogEgg_001/article/details/136009163
版权

目录

(一)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开启 

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模块内容 

3.devServer的更多配置项 

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

这个不详细写了，需要用到的时候查阅就可以了 

DogEgg_001
关注
Webpack学习-Resolve,Plugins,DevServer,其他配置项，整体配置解构，实战使用es6语言使用typsccript语言flow检查其SCSS,PostCSS,React框架
VAN
12-13 277
前端学习
webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程
ztK63LrD的博客
10-23 3939
根据上文webpack是有默认打包的入口与出口路径文件的，如果想修改的话，看如下操作：在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。// 导入路径模块// 使用 node.js 语法向外导出一个 webpack 的配置对象// 代表webpack运行模式,可选值:开发模式(development)和生产模式(production)// entry:'指定要处理的文件路径'// output:指定生成的文件要存放到哪里output:{// 存放目录。
深入浅出webpack学习(5)--Resolve
weixin_33912638的博客
02-06 258
Resolve webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。 1. alias resolve.alias配置项通过别名来把原...
Webpack模式-Resolve-本地服务器
最新发布
qq_45730399的博客
10-02 1159
Resolve解析、模式、搭建本地服务器
webpack之resolve
richest_qi的博客
07-03 2691
webpack从entry开始递归解析所有依赖的模块，而怎么找到这些模块对应的文件，怎么更准确更快地找到这些模块所在文件，这就是resolve擅长的了。我们来了解下。 resolve.modules 默认值是["node_modules"]， 意思是，webpack默认先去 当前目录的node_modules里找模块，要是没找着，就往上一级目录的node_modules找，还没找着，就继续往上，直到找到为止。 要是到头了还是没找着，那说明根本没这模块。 比如，我们会这样启动weback调试，node --i
webpack-resolve
weixin_45002586的博客
11-14 459
webpack-resolve
深入理解webpack之resolve
liubangbo的专栏
09-08 2847
相信很多用过vue-cli的朋友对都不会感到陌生，但不知有多少和我一样的朋友只知其行未解其意恰巧之前详细的查阅了相关文档，弄清楚了这个问题，在此做下记录，也希望能对读到的朋友有益。说一下题外话，真心建议大家一定要细读相关文档，很多不清楚的问题都是因为没有仔细的阅读。言归正传，webpack中使用字段来配置模块的相关解析策略。本质上是通过对resolve库的使用来解析模块路径，帮助 webpack 找到 bundle 中以require/import引入的模块代码。
webpack配置优化,让你的构建速度飞起
gogo2027的博客
11-14 801
越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~提升打包构建速度减少代码体积优化代码运行性能。
10分钟学会 webpack
阿城的博客
03-18 993
webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序。这些问题我们可以利用工具来处理，比如为了兼容就使用 Babel 转换 es6，ts 代码就使用 tsc 来转换。然后使用转换好的 js 引入 html 中。css 也一样。但是我们会发现，一个一个处理，这很麻烦，所以我们需要一个构建工具，可以帮助我们自动完成这些东西。webpack 就是一个这样的工具。
Webpack---Resolve
mmjinglin的博客
10-23 949
Resolve webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。 alias resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。如下： //webpack ...
webpack resolve
博客的博客
07-15 631
resolve是配置路径的规则，可以配置引入资源的默认路径 alias 配置解析路径别名 原本要这样引入css文件和js文件的 import './src/js/index.js' import './src/css/index.csss' 非常不方便而且容易出错，如果需要引入很多个文件就需要写很多次 但是可以通过配置解析模块路径别名来解决 配置方法： resolve:{ alias:{ $css:resolve(__dirname,'src/css'), $js:resolve(__dirna
webpack中resolve.extensions 说明
engineer_why的博客
05-22 1048
使用webpack，当导入语句时，webpack 会先去寻找.js文件，如果该文件不存在就去寻找.json文件，如果还是找不到就报错。esolve.extensions是用在配置 在使用过程中 使用到的后缀列表，① 后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。② 频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。③ 在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。默认是：extensions: [‘.js’, ‘.json’]
Webpack——devServer详细配置
weixin_42789698的博客
05-31 277
webpack.config.js
webpack resolve
mhbsoft的博客
07-10 176
webpack.config.js const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { // [name] 默认是 main， 可以写固定值 // 文件名称（制定名称+目录） filename: 'js/[name].js',
webpack 系列之三 | resolve
DiDi_Tech的博客
08-02 1844
桔妹导读：webpack 处理这些模块引入 import 的时候，有一个重要的步骤，就是如何正确的找到 './xxx'、'something-in-nodemodules...
webpack系列继续 webpack 源码分析之三resolve
五颜六色的白
02-20 265
webpack系列继续 webpack 源码分析之三resolve 超赞，感谢分享，转自： https://juejin.im/post/5c6b78cdf265da2da15db125
webpack resolve的作用
hao像飘在外太空的博客
09-17 2891
resolve: { //查找module的话从这里开始查找 root: 'E:/github/flux-example/src', //绝对路径 //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 extensions: ['', '.js', '.json', '.scss'], //模块别名定义，方
webpack优化构建速度示例-resolve.extensions:
qq_36413371的博客
05-15 288
当项目不仅仅包含.js或.json文件，还包含其他类型文件(如.ts、.vue、.css)作为模块时，配置resolve.extensions可以不必要的文件搜索提高性能。可以看到优化resolve.extensions的顺序，简单的三个小模块的打包就带来了1508-1467=41ms的性能提升。
webpack resolve.extensions 配置
liyunyun0124的博客
06-17 1384
resolve.extensions用于配置在尝试过程中用到的后缀列表，默认是：extensions: ['.js', '.json']也就是说当遇到require('./data')这样的导入语句时，Webpack 会先去寻找./data.js文件，如果该文件不存在就去寻找./data.json文件，如果还是找不到就报错。如果这个列表越长，或者正确的后缀在越后面，就会造成尝试的次数越多，所以resolve.extensions的配置也会影响到构建的性能。 在配置resolve.extensions时你需要
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值