webpack与Source Map

已于 2023-02-14 22:23:45 修改
阅读量187 收藏
点赞数
分类专栏： 前端 文章标签： webpack 前端 javascript
于 2022-11-08 17:41:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Da_ci_hua/article/details/127744077
版权

前端工程化

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

安装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

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

～东北大呲花 ～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack之SourceMap
Luckyzhoufangbing的博客
06-07 820
（一）什么是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打包生成的map文件_Webpack的source map
weixin_39977642的博客
12-22 1140
一、webpack中source map是什么目前我们的例子都是在浏览器里运行编译打包后的代码，编译后的代码会把我们的原始代码做压缩整合等操作。这样的代码与原始代码差别非常大，对于我们开发时是没有帮助的，我们很难调试编译后的代码。这个例子里需要打包的只有一个JS文件，代码很简单，定义两个变量name和age，分别在控制台打印。在打印name前在代码里打了一个断点debugger。// a.jsle...
js.map文件
m0_67403073的博客
04-19 6163
什么是source map文件 source map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map，压缩后通过变量替换规则可能会被替换成a，这时source map文件会记录下这个mapping的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！ 而这种还原性调试功能，所
webpack之source map
weixin_45047039的博客
11-29 2787
webpack之source map前言一、什么是source map二、在webpack中启用source map三、关于source map的各种模式 前言 通过构建编译之类的操作，我们可以将开发阶段的源代码，转换为能够在生产环境中运行的代码，这是一种进步，但这种进步的同时也意味着我们在实际生产环境中运行的代码与我们在开发环境编写的代码之间会有很大的差异，这种情况下如果我们需要去调试应用，又或是我们在运行应用时出现了意料之外的错误，我们将无法定位错误信息。因为无论是调试还是调试还是报错都是基于转换过后的
Webpack的source-map
weixin_47342624的博客
04-03 591
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 772
在webpack项目中，有时候打包运行后会出现错误，在浏览器开发者工具却无法准确定位到源代码出错的地方，只有打包代码出错的地方。这个时候可以使用sourceMap工具来做映射，找出源代码出错的地方，SourceMap 的主要作用是为了方便调试 module.exports = { mode: 'development', devtool: 'eval-source-map', // devtool: false, // 不想使用的情况下可以使用false } Sourcemap 的种类有很多，
webpack打包之sourcemap
我的博客简介
08-01 6125
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
webpack-sourcemap
weixin_45002586的博客
11-14 271
webpack sourcemap
webpack中的sourceMap
yuishelly的博客
03-20 407
webpack中的sourceMap
webpack-sourceMap配置
东东爱编码博客
12-23 1709
文章目录一、webpack-sourceMap配置 一、webpack-sourceMap配置 SourceMap 是什么，下面通过例子来演示。 修改 webpack.config.js，加上一行配置项 devtool: 'none' ： const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpac
webpack将js打包后的map文件详解
11-26
类似于这样的map文件 由webpack自动生成 参数： ...sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
webpack-source-maps
05-06
3. **cheap-module-source-map**：与 cheap-module-eval-source-map 类似，但不使用 `eval()`，因此更安全，但同样不包含列映射。 4. **source-map**：生成完整的 source map，包括列映射，适用于生产环境，但会增加...
浅谈webpack devtool里的7种SourceMap模式
10-17
主要介绍了浅谈webpack devtool里的7种SourceMap模式，主要介绍了这7种模式的使用和打包编译后的结果的不同，非常具有实用价值，有兴趣的可以了解一下
vscode 报错之 Could not read source map for file... 解决方案
最新发布
04-18
vscode 报错之 Could not read source map for file... 解决方案
stack-source-map：添加对错误堆栈的源映射支持（仅Chrome）
02-04
npm install stack-source-map 用法 require ( 'stack-source-map' ) ( ) Webpack条目 var entry = [ 'stack-source-map/register' // other entries . . . ] 使用标准文件 在页面中包含文件stacksourmap.js ，
source-map-loader:从模块中提取 sourceMappingURL 注释并将其提供给 webpack
08-04
入门首先，您需要安装source-map-loader ： npm i -D source-map-loader 然后将插件添加到您的webpack配置中。 例如： 文件.js import css from "file.css" ; webpack.config.js module . exports = { module : { ...
rollbar-sourcemap-webpack-plugin：一个Webpack插件，用于将源地图上传到Rollbar
02-06
RollbarSourceMapPlugin 这是一个插件，可简化从webpack构建生成的源地图上传到。 生产JavaScript捆绑包通常会在部署之前缩小，这会使Rollbar堆栈... 此插件不再与Webpack 3和更早版本兼容。 安装 使用npm安装插件
bugsnag-sourcemap-webpack-plugin:一个Webpack插件，用于在构建后将源地图上传到Bugsnag
05-15
BugsnagSourceMapPlugin 一个插件，用于在构建后将上传到安装 $ npm install --save-dev bugsnag-sourcemap-webpack-plugin用法在您的webpack.config.js中 const BugsnagSourceMapPlugin = require ( 'bugsnag-...
sourcemap-stack
05-17
sourcemap-stack 参数定义 参数属性 说明 mapUrl sourcemap 地址链接，如果不填，表示sourcemap地址跟实际js路径一样 mapName 参考webpack的地址格式，比如：[name].[hash].js.map mapEncrypt 如果map文件放到跟js同...
webpack的sourceMap
05-13
webpack的sourceMap是一种映射文件，它可以将打包后的代码映射回原始的源代码，方便我们进行调试和定位问题。在webpack的配置中，我们可以通过设置devtool选项来开启sourceMap。 常用的devtool选项包括： - source...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值