Webpack学习
webpack基础认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具。涉及到两个概念：模块 和 打包模块通过模块化开发完成项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而...
2024-01-10
Webpack使用Vue
Webpack配置使用Vue首先把上篇所写的代码复制一份。接着引入vue。通过npm install vue --save下载接着在main.js中导入vue并编写接着编写index.html。添加id，使用差值表达式使用npm run build重新打包项目。查看页面发现报错You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the tem...
2024-01-10
Webpack排除特定文件
我有这段代码webpack.config.prod.js，我想知道如何排除除特定路径中的一个以外的所有jsonsrc/configs/configsexclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/,],loader: require.resolve('file-loader'),options: { name: 'static/media/[n...
2024-01-10Webpack输出为空对象
我想构建一个React组件库作为节点模块，然后将其导入到不同的项目中。但是，如果我尝试导入组件，它只会返回一个空对象。button.jsx：import React, {Component} from 'react'export class Button extends Component { render() { return <button className='btn'>Hello Button comp</button> }}export default Buttonindex....
2024-01-10Webpack 项目的性能优化
Webpack 的 Code Splitting 介绍了三种减少加载包大小的技术，可以尝试运用两种：Entry Points：通过配置文件中的 entry 手动指定Prevent Duplication：通过 SplitChunksPlugin 拆分 和 杜绝重复Dynamic Imports：通过行内调用来拆分代码SplitChunksPlugin项目中已经采用第一种技术，根据页面的不同打成不同的 bundle；现在可...
2024-01-10实用的 Webpack 配置项
如何指定 Aliasresolvealias 在引用 js/css 等文件的时候如果不希望记忆前面的路劲，可以使用 aliasmodule.exports = { //... resolve: { alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates: path.resolve(__dirname, 'src/templates/') } }};import Utility fr...
2024-01-10
Webpack构建流程学习指南
最近原创文章回顾：《了不起的 tsconfig.json 指南》《了不起的 Webpack HMR 学习指南（含源码分析）》《《你不知道的 Blob》番外篇》《《你不知道的 WeakMap》番外篇》Webpack 是前端很火的打包工具，它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，...
2024-01-10Webpack将ES6编译成模块
我想将ES6编译为使用Webpack的文件，但无法弄清楚为什么代码不可用。Webpack将ES6编译成模块边注：这是为了对VueJS一个插件，我开始用一个简单的文件导出一个单一的功能，如exports.install =() => { ... } 的WebPack使用babel-loader和babel-preset-es2015到编译它。您可能会在this gist中找到webpack配置，源文件...
2024-01-10
《玩转 Webpack》 学习笔记
构建工具为什么需要构建工具？转换 ES6/ES7 、TypeScript 语法转换 JSX （Angular、React、Vue 模板语法）CSS 前缀补全/预处理器压缩混淆图片压缩前端构建工具的演变历史主流的有：ant+YUI Tool——>grunt——> fis3/gulp——>rollup/webpack/parcel为什么选择 webpack ?社区生态丰富配置灵活和插件化扩展官方更新...
2024-01-10
Vue学习笔记之Webpack介绍
在这里我仅仅的是对webpack做个讲解，webpack这个工具非常强大，解决了我们前端很繁琐的一些工具流程繁琐的事情。如果感兴趣的同学，简易还是看官网吧。中文链接地址：https://www.webpackjs.com/0x00 为什么要使用Webpack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一...
2024-01-10
适合初学者的Webpack完整指南
我们应该学习 webpack 吗 ？如今，CLI工具（如create-react-app或Vue -cli）已经为我们抽象了大部分配置，并提供了合理的默认设置。即使那样，了解幕后工作原理还是有好处的，因为我们迟早需要对默认值进行一些调整。在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我们的日常需...
2024-01-10三种Webpack打包方式(小结)
准备工作mkdir webpack_demo && cd webpack_demo #新建文件夹npm init #创建package.json文件npm install --save-dev webpack #安装依赖（非全局安装）mkdir app && mkdir public #新建app和public文件夹cd app && cd.>Greeter.js && cd.>main.js #app文件夹中创建Greeter.js和main.jscd .. && cd public && cd.>...
2024-01-10Webpack中雪碧图插件使用详解
背景在开发过程中，我们需要用到很多图标，这些图标的大小不是很大，但是每次需要向服务器发送请求，从而加重服务器的负担，尤其是当网站处于高访问量的情况下或网络不稳定的时候，服务器性能会明显下降。这种情况不符合被广泛遵循的雅虎军规“尽量减少HTTP请求数”的要求（雅虎前端优化...
2024-01-10Webpack打包慢问题的完美解决方法
前言这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶，当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是，React 加上 React-Router、superagent、eventproxy 这些第三方轮子一共有好几百个 module，Webpack 的打包速度极慢。这对于开发是非常不好的体验，同时效率也极低。...
2024-01-10
Webpack 前端资源加载/打包工具
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 的基本能力：处理依赖、模块化、打包依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块...
2024-01-10
【JS】Webpack 5 新特性尝鲜
首页专栏javascript文章详情0Webpack 5 新特性尝鲜西岭老湿发布于 今天 03:37 安装与启动Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变；今天我们就来做个对比看看，webpack5 带来了那些全新的改变；没有对比就没有伤害，为了更好...
2024-01-10Webpack 如何配置开发和线上环境
开发环境配置安装 webpack-dev-servernpm install -D webpack-dev-server在 package.json 的 scripts 中配置命令{ scripts: { "start": "webpack-dev-server --open", }}为了让我们 bundle 文件直接注入到默认的 html 文件中，我们需在配置中引入 html-webpack-pluginnpm install -D html-webpack-plugin修改配置...
2024-01-10在Webpack中加载静态JSON文件
我的代码在构造后的某个地方：var getMenu = function () { return window.fetch("portal/content/json/menu.json").then(function (data) { return data.json(); });};我尝试了webpack.config.js这个：module: { loaders: [ ... { test: /\.json$/, ...
2024-01-10不是由WebPack生成的源地图
不可否认，我对source maps和webpack有基本的了解。这是我的理解，如果我在我的webpack.config.js文件中正确设置devtools，我应该得到映射到原始代码的源映射文件。不是由WebPack生成的源地图我正在使用下面的配置文件，我没有得到任何源映射文件。任何想法为什么？var IS_DEV = false; var webpack = require('webpack'...
2024-01-10Webpack设置环境变量的一些误区详解
一、前言日常的前端开发工作中，至少会有两套构建环境 一套开发时使用，构建结果用于本地开发调试，不进行代码压缩、打印 debug 信息、包含 sourcemap 文件等一套发布时使用，构建结果用于线上，即代码都是压缩过的、运行时不打印 debug 信息、静态文件不包括 sourcemap 等webpack 4.0 版本开始引...
2024-01-10导入CSS模块插入的WebPack
我试图建立阵营-表，它依赖于一个样式表需要导入的WebPack用下面的语句：导入CSS模块插入的WebPackimport ReactTable from 'react-table' 不幸的是，我对配置Webpack不太熟悉，我不确定这条线应该放在哪里。这里是我的webpack.config.js文件：const loaders = require('loaders'); module.exports = { entry: [ './src/index.js' ...
2024-01-10如何在Webpack中以正确的顺序导入样式
我使用bootstrap css和用更少的文字编写的附加模板。我将两者都导入我的react组件的根组件中不幸的是，即使较少的文件是第二个导入的文件，引导程序中的样式也会覆盖较少的样式。有没有办法确保webpack样式的顺序。这是根组件：import React from "react";import Dashboard from "./dashboard";import 'bootstrap/dist/css/bo...
2024-01-10性能优化篇之Webpack构建速度优化的建议
如何输出Webpack构建分析输出Webpack构建信息的.json文件：webpack --profile --json > stats.json--profile:记录构建中的耗时信息--json:以json格式输出构建结果，最后只输出一个json文件（包含所有的构建信息）web可视化查看构建分析：得到了webpack构建信息文件stats.json，如何进行很好的可视化查看？方案一：通...
2024-01-10
50行代码实现Webpack组件使用次数统计
背景最近有个领导想让我们搭组件库，然后我就想知道目前项目中使用的三方组件库哪些组件使用频率最高。本来想去咨询小伙伴，但是小伙伴太忙了，只能自己弄了。我就想能不能通过 webpack 来实现我的想法效果我们是用的 @material-ui，下面是组件使用情况实现我们知道 loader 的 source是文件的...
2024-01-10
Webpack HMR学习指南（含源码分析）
学习时间：2020.06.14学习章节：《Webpack HMR 原理解析》一、HMR 介绍Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，它允许在 JavaScript 运行时更新各种模块，而无需完全刷新。当我们修改代码并保存后，Webpack 将对代码重新打包，HMR 会在应用程序运行过程中替...
2024-01-10
