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输出为空对象
我想构建一个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.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 项目的性能优化
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-10加速Webpack构建技巧总结
Web 应用日益复杂，相关开发技术也百花齐放，这对前端构建工具提出了更高的要求。 Webpack 从众多构建工具中脱颖而出成为目前最流行的构建工具，几乎成为目前前端开发里的必备工具之一。 大多数人在使用 Webpack 的过程中都会遇到构建速度慢的问题，在项目大时显得尤为突出，这极大的影响了我们...
2024-01-10Webpack将ES6编译成模块
我想将ES6编译为使用Webpack的文件，但无法弄清楚为什么代码不可用。Webpack将ES6编译成模块边注：这是为了对VueJS一个插件，我开始用一个简单的文件导出一个单一的功能，如exports.install =() => { ... } 的WebPack使用babel-loader和babel-preset-es2015到编译它。您可能会在this gist中找到webpack配置，源文件...
2024-01-10WebPack基础知识详解
1、什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。2、为什要使用WebPack今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的Java...
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-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-10Webpack打包慢问题的完美解决方法
前言这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶，当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是，React 加上 React-Router、superagent、eventproxy 这些第三方轮子一共有好几百个 module，Webpack 的打包速度极慢。这对于开发是非常不好的体验，同时效率也极低。...
2024-01-10
Webpack 前端资源加载/打包工具
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 的基本能力：处理依赖、模块化、打包依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块...
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 4构建React组件库
我目前正在构建一个React组件库，并将其与Webpack 4捆绑在一起。从构建库的捆绑包到将其发布到npm注册表中，一切工作都很好。但是，然后，我无法将其任何组件导入其他React应用程序中，并在运行时得到以下错误消息：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件...
2024-01-10性能优化篇之Webpack构建速度优化的建议
如何输出Webpack构建分析输出Webpack构建信息的.json文件：webpack --profile --json > stats.json--profile:记录构建中的耗时信息--json:以json格式输出构建结果，最后只输出一个json文件（包含所有的构建信息）web可视化查看构建分析：得到了webpack构建信息文件stats.json，如何进行很好的可视化查看？方案一：通...
2024-01-10
