webpack与Source Map

已于 2023-02-14 22:23:45 修改
阅读量231 收藏
点赞数
分类专栏： 前端 文章标签： webpack 前端 javascript
于 2022-11-08 17:41:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/da_ci_hua/article/details/127744077
版权
本文详细介绍Webpack的安装与配置过程，包括环境搭建、模式设置、插件使用、Loader配置等核心内容，并提供了完整的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端工程化

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

安装webpack

npm install webpack webpack-cli -D

![在这里插入图片描述](https://img-blog.csdnimg.cn/73a55320685a4fa7a6cb3dd9e77e6465.png

webpack的配置

在这里插入图片描述

<!-- index中的代码有兼容性问题，使用打包后的webpack打包后的js文件 -->
    <!-- <script src="./index.js"></script>-->
    <script src="../dist//main.js"></script>

mode

mode:"development"
或
mode:"production"

在这里插入图片描述

配置打包入口与出口

在这里插入图片描述

在这里插入图片描述

const path = require('path')

module.exports = {
    //mode 用来指定构建模式  可选development 和 production
    mode: 'development',
    //entry为指定打包入口
    entry: path.join(__dirname, './src/index.js'),
    //output指定打包出口
    output: {
        //路径
        path: path.join(__dirname, './dist'),
        //表示输出文件的名称
        filename: 'bundle.js'

    }
}

webpack中的插件

在这里插入图片描述
1.webpack-dev-server
在这里插入图片描述
在这里插入图片描述

npm install webpack-dev-server -D

在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!-- index中的代码有兼容性问题，使用打包后的webpack打包后的js文件 -->
    <!-- <script src="./index.js"></script>-->
    <!-- <script src="../dist/bundle.js"></script> -->
    自动打包需要这样写，因为打包好的文件在内存中，根目录下，需要这样访问
    <script src="/bundle.js"></script>

2.html-webpack-plugin

在这里插入图片描述
在这里插入图片描述

npm install html-webpack-plugin -D

配置html-webpack-plugin
在这里插入图片描述在这里插入图片描述

const path = require('path')

//导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定原文件的存放路径
    template: './src/index.html',
    //指定生成文件的存放路径
    filename: './index.html'
})

module.exports = {
    //mode 用来指定构建模式  可选development 和 production
    mode: 'development',
    //通过plugins节点，使htmlPlugin生效
    plugins: [htmlPlugin],
    //entry为指定打包入口
    entry: path.join(__dirname, './src/index.js'),
    //output指定打包出口
    output: {
        //路径
        path: path.join(__dirname, './dist'),
        //表示输出文件的名称
        filename: 'bundle.js'

    }
}

该插件会自动在index.html引入script，所以无需写dist，删除即可。
在这里插入图片描述

devServer节点

可以配置打包完成后是否自动打开浏览器展示页面

在这里插入图片描述

const path = require('path')

//导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定原文件的存放路径
    template: './src/index.html',
    //指定生成文件的存放路径
    filename: './index.html'
})

module.exports = {
    //mode 用来指定构建模式  可选development 和 production
    mode: 'development',
    //通过plugins节点，使htmlPlugin生效
    plugins: [htmlPlugin],
    //entry为指定打包入口
    entry: path.join(__dirname, './src/index.js'),
    //output指定打包出口
    output: {
        //路径
        path: path.join(__dirname, './dist'),
        //表示输出文件的名称
        filename: 'bundle.js'

    },
    devServer: {
        //初次打包完成后，自动打开浏览器
        open: true,
        //实时打包所使用的主机地址
        host: '127.0.0.1',
        //实时打包所使用的端口号
        port: 8081
    }
}

loader

在这里插入图片描述
在这里插入图片描述打包处理css文件

在这里插入图片描述

npm i style-loader css-loader -D

代码总结

const path = require('path')

//导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定原文件的存放路径
    template: './src/index.html',
    //指定生成文件的存放路径
    filename: './index.html'
})

module.exports = {
    //mode 用来指定构建模式  可选development 和 production
    mode: 'development',
    //通过plugins节点，使htmlPlugin生效
    plugins: [htmlPlugin],
    //entry为指定打包入口
    entry: path.join(__dirname, './src/index.js'),
    //output指定打包出口
    output: {
        //路径
        path: path.join(__dirname, './dist'),
        //表示输出文件的名称
        filename: 'bundle.js'

    },
    devServer: {
        //初次打包完成后，自动打开浏览器
        open: true,
        //实时打包所使用的主机地址
        host: '127.0.0.1',
        //实时打包所使用的端口号
        port: 8081


    },
    //所有第三方文件模块的匹配规则
    module: {
        //文件后缀名的匹配规则
        rules: [
            //use数组中顺序是固定的，多个loader的调用顺序是从后往前调用的
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }


}

打包处理less文件
在这里插入图片描述

npm i less-loader less -D

 //配置打包less文件
 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

打包处理样式表中与URL路径相关的文件

注意：版本大于5的webpack不需要配置url-loader

npm i url-loader file-loader -D

打包处理js文件中的高级语法
注意：新版本的webpack不用配置了，可以处理高级js代码了
在这里插入图片描述在这里插入图片描述

npm i babel-loader  
bable/core  
bable/plugin-proposal-class-properties 
 -D

在这里插入图片描述

打包发布

为什么要打包发布

在这里插入图片描述

配置webpack打包发布

在这里插入图片描述
在这里插入图片描述图片啥的类似

自动删除dist目录下的旧文件
在这里插入图片描述

npm install clean-webpack-plugin -D

webpack.config.js代码

const path = require('path')

//导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
    //按需导入自动删除dist文件的插件，得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    //指定原文件的存放路径
    template: './src/index.html',
    //指定生成文件的存放路径
    filename: './index.html'
})

module.exports = {
    //mode 用来指定构建模式  可选development 和 production
    mode: 'development',
    //通过plugins节点，使htmlPlugin生效 使cleanPlugin生效
    plugins: [htmlPlugin, cleanPlugin], //挂载插件
    //entry为指定打包入口
    entry: path.join(__dirname, './src/index.js'),
    //output指定打包出口
    output: {
        //路径
        path: path.join(__dirname, './dist'),
        //表示输出文件的名称
        filename: 'bundle.js'

    },
    devServer: {
        //初次打包完成后，自动打开浏览器
        open: true,
        //实时打包所使用的主机地址
        host: '127.0.0.1',
        //实时打包所使用的端口号
        port: 8081


    },
    //所有第三方文件模块的匹配规则
    module: {
        //文件后缀名的匹配规则
        rules: [
            //use数组中顺序是固定的，多个loader的调用顺序是从后往前调用的
            //配置打包css文件
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            //配置打包less文件
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //配置图片url路径相关  版本大于5的webpack不需要配置url-loader  limit代表图片体积
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' }

        ]
    }


}

index.js代码

//使用ES6模块化的语法导入jquery
import $ from 'jquery'
//引入css文件模块
import './css/index.css'
//引入less文件模块
import './css/index.less'

//实现隔行变色效果
$(function() {
    $('li:odd').css('backgroundColor', 'red')
    $('li:even').css('backgroundColor', 'cyan')
})


//使用js高级语法
class Person {
    static info = 'person info'
}

package.json

"scripts": {
        "dev": "webpack serve",
        "build": "webpack  --mode production"
    },

在这里插入图片描述

Source Map

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

（11）webpack source-map
秋来九月八
10-29 339
source-map：一种提供源代码到构建后代码的映射的技术 （如果构建后代码出错了，通过映射可以追踪源代码错误） 使用方式很简单 在webpack.config.js配置中加上 module.exports = { ... devtool: 'eval-source-map' } devtool对应值的种类 1、source-map：外部，错误代码准确信息 和 源代码的错误位置 2、inline-source-map：内联，只生成一个内联 source-map，错误代码准确信息 和 源代码的错误位置 3
【学习笔记】Webpack5（Ⅱ）
Eddie_hyh的博客
05-24 884
Webpack5（Ⅱ）
js.map文件
m0_67403073的博客
04-19 6778
什么是source map文件 source map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map，压缩后通过变量替换规则可能会被替换成a，这时source map文件会记录下这个mapping的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！ 而这种还原性调试功能，所
【Webpack】Source Map详解
lph159的博客
09-23 1982
在现代的前端开发中，源代码经过编译、打包和压缩后会变得难以阅读，尤其是当你使用如 Babel 之类的工具将 ES6+ 的语法转换成 ES5 时，或是使用 TypeScript 编译为 JavaScript 代码。此时，如果项目在生产环境中出现问题，调试变得极为困难。为了解决这个问题，Source Map作为一种映射机制应运而生。它将编译、压缩后的代码与源代码对应起来，使开发者在调试工具中能够看到原始的代码结构。这极大地提高了调试的效率和开发体验。Source Map。
webpack之source map
weixin_45047039的博客
11-29 2994
webpack之source map前言一、什么是source map二、在webpack中启用source map三、关于source map的各种模式 前言 通过构建编译之类的操作，我们可以将开发阶段的源代码，转换为能够在生产环境中运行的代码，这是一种进步，但这种进步的同时也意味着我们在实际生产环境中运行的代码与我们在开发环境编写的代码之间会有很大的差异，这种情况下如果我们需要去调试应用，又或是我们在运行应用时出现了意料之外的错误，我们将无法定位错误信息。因为无论是调试还是调试还是报错都是基于转换过后的
Webpack的source-map
weixin_47342624的博客
04-03 652
webpack为我们提供了非常多的选项（目前是26个），来处理source-map，选择不同的值，生成的source-map会稍微有差异，打包的过程也会有性能的差异，可以根据不同的情况进行选择；推荐使用 source-map或者cheap-module-source-map ,分别是vue和react使用的值，可以获取调试信息，方便快速开发；会生成一个独立的source-map文件，并且在bundle文件中有一个注释，指向source-map文件；webpack提供的26个值，是可以进行多组合的；
webpack中sourceMap的使用
weixin_44684357的博客
04-18 840
在webpack项目中，有时候打包运行后会出现错误，在浏览器开发者工具却无法准确定位到源代码出错的地方，只有打包代码出错的地方。这个时候可以使用sourceMap工具来做映射，找出源代码出错的地方，SourceMap 的主要作用是为了方便调试 module.exports = { mode: 'development', devtool: 'eval-source-map', // devtool: false, // 不想使用的情况下可以使用false } Sourcemap 的种类有很多，
webpack-sourcemap
weixin_45002586的博客
11-14 345
webpack sourcemap
webpack打包之sourcemap
我的博客简介
08-01 7379
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
webpack-source-map
m0_74019046的博客
04-21 375
通常运行在浏览器上的代码是压缩过的，在浏览器上运行的代码和编写的代码是有差异的，这些代码会进行丑化压缩，修改变量名称，将ts转换为js等操作。当代码出错时调试转化后代码很困难，可以通过source-map将转换后的代码映射到源文件，使浏览器可以重构原始源并在调试器中显示重建后的原始源。使用source-map的步骤：1.根据源代码，生成source-map文件，webpack在打包时，可以通过配置生成source-map。2. 在转换后的代码最后添加一行注释，指向source-map。
webpack中的sourceMap
yuishelly的博客
03-20 485
webpack中的sourceMap
webpack之SourceMap
Luckyzhoufangbing的博客
06-07 975
（一）什么是sourceMap sourceMap其实是一个映射关系，比如打包后的js文件（如dist目录下main.js第78行报错了），sourceMap能够找到（dist目录下main.js第78行）对应的打包前的源文件（是哪个文件夹下的哪一行） （二）用法 在 webpack.config.js 中 module.exports 里面加一行 devtool: 'source-map' devtool有很多source-map形式，详情见webpack手册devtool部分 配置好.
webpack的sourceMap
05-13
webpack的sourceMap是一种映射文件，它可以将打包后的代码映射回原始的源代码，方便我们进行调试和定位问题。在webpack的配置中，我们可以通过设置devtool选项来开启sourceMap。 常用的devtool选项包括： - source...
chain webpack的source map配置
06-13
要配置 Chain Webpack 的 Source Map，可以使用 `devtool` 属性。`devtool` 属性可以设置为不同的字符串，每个字符串对应不同的 Source Map 类型。以下是一些常见的 Source Map 类型及其对应的 `devtool` 值： - `...
webpack 学习
weixin_42508745的博客
05-17 1085
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。在 Web 开发中，它主要用于将各种资源（如 JavaScript、CSS、图片等）打包成浏览器可以直接运行的文件。webpack作用把静态模块内容，压缩、转译、打包等（前端工程化）
【前端优化】vue2 webpack4项目升级webpack5，大大提升运行速度
weixin_42050406的博客
05-16 335
简单配置后，项目初次运行时间缩短了一半，第二次运行时间在1分钟内，提升显著； 打包时间也缩短了2/3
项目中把webpack 打包改为vite 打包
最新发布
weixin_56263402的博客
05-19 313
处理安装@vitejs/plugin-vue2-jsx包,并在vite.config.js文件配置,发现有些vue文件script标签里面有些也有使用jsx语法,找了很多博客,文章发现需要把script的lang改为jsx,但是这样会影响原有的代码逻辑,没办法采用h函数把这些jsx写的代码dom都使用h函数重构一下.老vu e-cli1创建的项目,项目是ERP系统集成了很多很多管理,本地运行调试的时候,每次修改代码都需要等待3分钟左右的编译时间,严重影响开发效率.这里大功告成项目基本正常运行了,
require/exports 或 import/export的联系和区别，各自的使用场景
qq_34629527的博客
05-16 421
可通过工具（如 Babel、Webpack）相互转换，兼容不同运行环境。‌静态优化需求‌：需 Tree Shaking 移除未使用代码。‌现代前端框架‌（React/Vue）：与构建工具链深度集成。两者都用于实现代码模块化，解决全局作用域污染和依赖管理问题。‌Node.js 后端开发‌：原生支持，无需编译12。‌动态依赖加载‌：需根据条件动态导入模块的代码逻辑4。‌旧项目维护‌：基于 CommonJS 的传统项目或库。‌浏览器原生模块‌：通过。
本地跑通vue-element-admin项目
renzhe1301的专栏
05-16 1079
通过加速clone到本地# 进入项目目录# 安装依赖# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题通过上面的命令安装依赖报错了npm cache clean --force 执行这个命令后在重新install 就成功了# 启动服务如果二次开发，建议下载基础模板学习node学习webpackwebpack4英文文档学习vue教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值