![](https://img-blog.csdnimg.cn/65e93be5b2aa4a2ba0a378b55311e4ba.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
文章平均质量分 51
是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)
https://webpack.docschina.org/
不能懒鸭
努力写出优雅的代码
展开
-
六、webpack之 Source Map(用于定位bug)
代码投入生产环境之前,需要对js源代码进行压缩混淆,从而减小文件的体积,提高文件加载效率。但是生产上的代码 一旦报错,就找不到源代码。Source Map 就是一个信息文件,里面存储着位置信息,即代码压缩混淆前、后的对应关系。开发环境下:webpack默认启用了Source Map。当程序运行出错时,可以直接在控制台错误行的位置,并定位到具体的源代码加粗样式。但是默认生成的Source Map,记录的是生成后的代码位置,会导致运行报错行数与源代码行数不一致的问题。解决://webp原创 2022-02-12 23:02:40 · 797 阅读 · 0 评论 -
五、webpack项目打包发布(配置、整理dist目录下的文件)
为什么要打包发布(生产环境打包)?开发环境下,打包生成的文件存放于内存中,无法获取到开发环境下,打包生成的文件不会进行代码压缩、性能优化配置:package.json 中新增build命令:"scripts":{ "dev":"webpack serve",//开发环境下,运行npm run dev "build":"webpack --mode production",// 项目发布时,运行npm run build 得到dist文件夹,此处的production生产模式会覆盖webpa原创 2022-02-12 21:40:54 · 2362 阅读 · 0 评论 -
四、webpack 加载器loader(安装、配置)
webpack默认只能打包处理以 .js 后缀名结尾的模块,需要利用loader加载器才可以正常打包,否则报错。loader加载器作用:协助webpack打包处理特定的文件模块。css-loader 打包处理 .css相关的文件less-loader 打包处理 .less相关的文件url-loader 打包处理 css中的图片urlbabel-loader 打包处理webpack无法处理的高级js语法css安装 npm i style-loader css-loader -D配原创 2022-02-11 17:53:09 · 648 阅读 · 0 评论 -
三、webpack 插件plugin(安装、配置)
1. webpack-dev-server让webpack监听项目源代码的变化,从而进行自动打包构建热更新(不用每次修改代码后再重新构建一次)安装 npm i webpack-dev-server@3.11.0 -D配置://package.json"script":{ //"dev":"webpack", "dev":"webpack server",}执行命令 npm run dev,再次修改代码,发现可以打包成功,但是页面并没有更新!!!(原理在文章最后!)。<原创 2022-02-11 11:25:41 · 1719 阅读 · 0 评论 -
二、webpack 自定义入口、出口文件
const path = require('path') module.exports={ mode:"development", entry:path.join(__dirname,'./src/index.js'),//打包入口 output:{ path:path.join(__dirname,'./dist'),//输出文件存放的路径 filename:'bundle.js',//输出的文件名称 (首页引入此文件!!!) }}原创 2022-02-11 10:11:53 · 439 阅读 · 0 评论 -
一、webpack基本使用
webpack.config.jsconst path = require('path') module.exports={ mode:"development", entry:path.join(__dirname,'./src/index.js'),//打包入口 output:{ path:path.join(__dirname,'./dist'),//输出文件存放的路径 filename:'bundle.js',//输出的文件名称 (首页原创 2022-02-10 17:16:22 · 294 阅读 · 0 评论