所以我在新的Ng书2中跟随,我遇到了一个错误,阻止我积极跟随图坦卡蒙。我已经把这个问题发给了作者,所以一旦他们回答了,我会用他们的答案更新这个问题。但现在非常感谢你的帮助
基本上,为了运行表单和表单验证示例,我必须运行命令“makeinstall”和“makedev”
使安装正常工作,但我确实使开发人员在遇到以下错误时:
./node_modules/.bin/webpack-dev-server
module.js:338
throw err;
^
Error: Cannot
我正在用Webpack和Jest建立一个项目。目前,Webpack解析配置会导致Jest测试的复杂性。在我的网页配置中,我设置了以下选项:
resolve: {
root: [__dirname + "/src/" ],
extensions: ['', '.js', '.coffee', '.jsx', '.css', '.scss', '.svg']
}
这使我需要具有以下功能的资产和模块:
import UnknownImg from 'assets/unknow
我使用React+Redux+Webpack+WebpackDevserver。启动热加载程序后,所有减速器都会重置为初始状态
我能让我的减速器保持在实际状态吗
我的网页包配置包含:
entry: [
"./index.jsx"
],
output: {
filename: "./bundle.js"
},
module: {
loaders: [
{
test: /\.js|\.jsx$/,
exclude
有以下任务-我有一个包含视图的文件夹:
--views
----view1
------view1.js
------view1.html(or jade)
----view2
------view2.js
------view2.html(or jade)
因此,我需要为webpack创建一个简单的配置,它可以创建以下输出“public”文件夹:
--public
----js
------view1.js
------view2.js
----view1.html
----view2.ht
我在我的开发工具链中使用webpack和babel;运行以下代码时:
import * as fabric from 'fabric';
var canvas = new fabric.Canvas('canvas');
我得到以下错误:
_fabric2.default.Canvas is not a constructor
而如果我使用require('fabric'),同样的代码也可以正常工作而不是
导入
我尝试了调用import的不同方法,但都不起作用
我的linting工具抱怨未
我有一个ES6模块,我正在尝试为其编写测试,该模块用于前端react/redux应用程序
以下是模块的一部分,它在我的测试中绊倒了我:
import 'aws-sdk/dist/aws-sdk';
import Bluebird from 'bluebird';
const AWS = window.AWS;
import chai from 'chai';
import { expect } from 'chai';
import chaiAsPromised from 'chai-as-
尝试使用webpack将我所有的主要库捆绑到一个文件中,但没有成功
下面是我的webpack.config.js
module.exports = {
entry: {
main: [
'./core/vendor/jquery.min.js',
'./core/vendor/bootstrap.min.js',
"./core/vendor/knockout-3.3.0.j
我试图在一个项目中做一些我不确定是否可能的事情,我以一种错误的方式或者误解了一些事情。我们正在使用webpack,其目的是为多个html文件提供服务
localhost:8181->services index.html
localhost:8181/example.html->example.html
我试图通过设置多个入口点来实现这一点,如下所示:
文件夹结构为:
/
|- package.json
|- webpack.config.js
/src
|- index.html
标签: Webpack
webpack-dev-serverwebpack-2webpack-plugin
我正在编写一个webpack插件,其中包括捆绑包中的一个附加文件(使用子编译器)。这很好,但现在我想添加手表支持。问题是,包含的文件可能依赖于主编译器实例中的所有文件,因为我正在从主编译器实例中提取函数。通常情况下,这只会分解为实际使用插件提供的一些功能的文件的一小部分。我的想法是通过使用一个版本标志来实现watch支持,每当我的插件需要再次编译资源时,该标志就会递增。。。但是,只有在编译完来自父编译器的所有文件后,版本才会更改。是否有一种方法可以在父级的文件编译之后但在资产发出之前强制重新生成
在GitHub上的一个样板项目中,我在一个网页配置中发现了一些我还不理解的东西
为什么在同一测试中定义了两次以下加载程序?
如果删除其中一个,则应用程序不会按预期呈现
{ test: /\.css$/, include: path.resolve('./src/app'), loaders: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{ test: /\.css$/,
从
第一段说
为了有效地缓存文件,文件中应该有一个哈希或版本
他们的网址
URL中的hash/version使浏览器能够长期缓存文件的目的是什么?通常,缓存可能在不久的将来更改较长时间的文件不是一个好主意,因为您的客户端可能不会加载这些文件的最新版本。因此,缓存bundle.js可能会导致在更新代码后,由于某些缓存设置,浏览器仍会加载旧的bundle.js
解决这个问题的一个好方法是对生成的包进行散列,并将该散列附加到文件名中,这在使用webpack时很容易使用。因此,您的第一个版本名为bund
官方文档似乎暗示您需要复制webpack配置——一次在测试之外使用,另一次在karma.conf内部使用
//Karma配置
module.exports=函数(配置){
config.set({
网页:{
//外部使用相同的网页包配置
},
};
但是,当我开始复制/粘贴工作的webpack配置时,我开始出现错误。例如,ES6代码没有传输(即使配置了babel)。commons chunk插件无法工作,因为它给出了一个错误。karma.conf如下所示:
const webpack=requ
Webpack已更改很多,找不到适用于v2.2.0的有效Webpack.config
我确实想将Webpack.config从2.1迁移到2.2
我犯了很多这样的错误:
ERROR in ./src/styles/core.scss
Module build failed: ReferenceError: window is not defined
那么,我需要改变什么来使用v2.2呢
我的档案是:
import webpack from 'webpack';
import cssnano f
标签: Webpack
minifyreact-boilerplate
当我在react样板文件中执行“npm运行构建”时,我得到的javascript文件是一个缩小的文件。避免在生成版本中缩小的选项是什么。我需要在特定环境中进行测试
我想做一个短跑。因此,我将Webpack和video.js与videojs contrib dash插件结合使用:
import videojs from 'video.js'
import 'videojs-contrib-dash'
export default {
name: 'videojs',
props: ['src'],
mounted () {
let player = videojs(this.$el)
player.ready(functio
我正在使用WebPack连接js文件并输出到dist文件夹。所有这些似乎都是可行的,但我的问题是,我想在没有额外的webpack boostrap代码的情况下压缩所有js文件
/******/ (function(modules) { // (/******/ (function(modules) { // webpackBootstrap)......
是否有任何方法可以阻止webpack添加代码,而不仅仅是获取简单的js文件并对其进行处理(比如gulp concat) 可以使用
webpa
我需要用webpack创建一个bundle.less文件,其行为与less loader+Extract文本插件相同,只是它不应该将less编译成css,只连接所有必需的less文件并内联less导入
原因是我有一些变量将在运行时解析,以允许用户自定义应用程序主题,但我希望在生产捆绑资源中发布,而不是整个源文件集合
有没有一种方法可以用现有的插件来实现这一点,或者我需要编写一个我宁愿避免的网页包插件?最后,我决定创建一个递归内联较少导入的自定义网页包加载程序。最后,我决定创建一个递归内联较少导入
嗨
我在版本>2.4.3的webpack dev server上运行量角器测试时遇到问题。当我运行测试时,浏览器显示消息:“无效主机头”,测试失败。如果我将webpack dev server的版本更改为2.4.2,一切都正常。我知道webpack中的选项“public”,但我不知道我应该将哪个主机或ip放入量角器。我想我什么都试过了。这是我的webpack.config:
'use strict';
const HtmlWebpack = require('html-webpack-plug
下面是我的webpack.config.js。我已经指定了一个输出文件名,但仍然出现错误throw new error(“'output.filename'是必需的,在配置文件中或作为--output filename”)
公共主管是否需要存在,或者webpack是否会创建一个
module.export = {
entry: [
'/ts/main.ts',
'/ts/vendor.ts'
],
output:{
path
标签: Webpack
karma-runnerkarma-webpack
我遇到一个错误,karma无法找到从网页别名加载的模块SCS和图像
Error: Module build failed:
@import '~Styles/file';
^
File to import not found or unreadable: ~Styles/file.
WebpackDevServer和build能够找到这些,并且工作得很好。Karma可以毫无问题地加载其他所有内容,只有alias文件
webpack.config.js
...
re
我的配置中有以下内容
proxy: {
"/conf": "http://localhost:8080",
"/ws": {
"target": "ws://localhost:8080",
"ws": true
}
}
我正在构建一个单页应用程序,其中一条路径是/configuration
如果请求没有代理到后端,我无法刷新此
当使用ASP.NET核心和Webpack创建一个新的web项目时,我从Thread获得了关于提取文本Webpack插件的依赖性警告
我的复制步骤:
dotnew新网站
纱线初始
纱线添加--dev webpack webpack cli
webpack init
将显示以下警告消息:
警告“>提取文本网页包-plugin@3.0.2“具有不正确的对等依赖项”webpack@^3.1.0“
webpack
显示以下错误消息:
(节点:19320)弃用警告:Tapable.plugin已弃用。使用
文档使我听起来好像可以通过以下方式输出我的头元:
plugins: [
new HtmlWebPackPlugin({
title: 'Benjamin Chirlin - Web Devloper',
filename: "./index.html",
meta: {
description: "A description",
author: "My Name" ,
viewport: "width=device-width,he
我正在创建一个简单的VueJs应用程序,Axios用于发出http请求。大概是这样的:
load () {
let vm = this
this.$http
.get('/api/posts')
.then(response => {
// success
})
.catch(error => {
// failure
})
}
在网页包配置文件中,config/index.js:
module.exports
如果我使用webpack和Laravel Mix,我应该如何包括webpack插件?我不知道我将插件代码添加到哪个文件中
我下面的尝试似乎没有运行我的插件。插件应该压缩js、css文件,但不是
webpack.config.js:
require('./node_modules/laravel-mix/src/index');
require(Mix.paths.mix());
// My plugin is here
const CompressionPlugin = req
我希望我的webpack编译库是函数的返回值
Webpack将允许我编译输出,通过将配置文件中的libraryTarget设置为var,我可以得到如下结果:
var MyLibrary = function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,expo...;
function init(){
return function(e){var t={};function r(n
标签: Webpack
webpack-dev-serverlaravel-mix
在创建Laravel之外的项目时,无法使用版本控制,因为没有mix指令。唯一的方法是创建Mix.php类并实现该指令的功能
因此,我创建了index.php,而不是index.html,并需要Mix类。一切正常。现在的问题是WebpackDev服务器不解析php文件,我将无法进行热重新加载。如果我使用服务器访问它,下载文件,这是一种正常行为,因为它不关心php
以前有人有过这个问题吗?请分享你的经验。我想出来了。不需要直接调用localhost:8080。我唯一要做的就是打开我的虚拟主机,并将我
我将webpack与WebStorm一起使用,我想将生成的dist文件夹部署到我的远程服务器
我已配置FTP连接,但无法在“本地路径”字段中选择dist文件夹,因为它会给出错误“本地路径项目\dist超出项目范围”
如何配置WebStorm?这是一个已知的可用性问题:为了获得更好的性能,webpack目标目录自动从索引中排除,排除的文件夹被认为是外部的,因此无法部署。相关youtrack票证:
从Preferences/Languages/Javascript/webpack中删除webpack
标签: Webpack
webpack-dev-serverwebpack-2webpack-hmrwebpack-4
我正在使用WebpackV4,试图将Webpackdev服务器添加到我的项目中。我在这里面临的问题是,当我运行webpack dev server命令my时,它会在默认浏览器中打开一个本地服务器,但不会为已编译的资产提供服务,也不会监视文件的更改
我还没有实施热模块更换
这是项目结构
package.json
{
"name": "webpack-starterkit",
"version": "1.0.0",
"description": "webpack starter kit
我的网页包配置中有一些插件:
plugins: [
new somePlugin()
]
但是我不想在我刚刚运行npm run start时启动这个插件,而是在我添加一些标志时运行,比如npm run start--plugin。是否可以在不将Webpack划分为不同配置的情况下实现此功能?您可以通过使用Webpack命令传递env变量来实现此功能
请阅读本文以供参考
运行=>webpack--env.production
将webpack.config.js中的module.expo
我正在使用LaravelMix,它使用Webpack3.6,我正在尝试安装
我的SCS可能通过@import./../../../../node\u modules/tippy.js/dist/tippy.css”正常工作
但是,在我的javascript文件的顶部,我有一个不起作用的:
var $ = require('jquery');
var webcast_helper = require('webcast_helper');
var moment = require('moment')
在花了一些时间试图理解资产和静态文件夹之间的区别之后,我陷入了如何将CSS和其他文件添加到资产文件夹的困境。我以我认为应该的方式添加了它们,但它们在编译后并没有反映在静态中。我正在使用webpack构建资产。拜托,我需要帮忙吗 来自:
资产/static中的文件和目录将复制到
目的地优先级/静态/无更改
资产内部的css和js目录是一种惯例。早午餐
只需查找资产中的所有文件,不包括资产/静态和
按类型对所有找到的文件进行排序
已处理和连接的javascript将被放入
priv/static/
我有一个使用vue CLI运行的项目。我需要在编译过程中添加一些自定义逻辑(简而言之,我想在/assets/directory中发生更改时生成一些文件)
经过一些思考,我决定添加自定义网页包插件,并在这个插件中手动观察更改。但我对性能有一些怀疑,而且这不是一种开销或糟糕的做法
这是插件:
class customWebpackWatcher {
apply(compiler) {
compiler.hooks.watchRun.tap('customWatcher', compila
标签: Webpack
webpack-dev-serverwebpack-4webpack-style-loader
我正在尝试在不使用CreatReact应用程序的情况下构建React应用程序
这是我的package.config.js:
//configurations for babel loader
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./i
我只想导入一个css文件(import'./index.css'),但样式加载器会抛出一个错误:
injectStylesIntoStyleTag.js:74未捕获范围错误:无效数组
长度
在AddModuleStoreDOM(injectStylesIntoStyleTag.js:74)
在./node_modules/style loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports
(injectStylesIntoSt
我刚刚升级到最新的CopyPlugin、CleanWebpack、Webpack等,我无法复制我的字体。他们在升级之前工作得很好。有什么想法吗
new CopyPlugin({
patterns: [
{ from: 'src/assets/fonts', to: 'fonts' },
],
}),
new WriteFilePlugin()
版本:
"clean-webpack-plugin": "
更新:在此处添加源完整回购:
上下文:这是一个使用服务器端渲染的CreateReact应用程序。与此问题相关的是,我试图让这个构建过程(webpack?)不因使用第三方npm模块的.less文件而受阻
这就是我在纱线构建时遇到的错误:
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) /Users/username/dev/learn/react/ssr-cra-gra
标签: Webpack
yarnpkgjupyter-labqgrid
当我尝试安装qgrid时,它失败了,日志文件中的核心错误如下:
$ webpack --config webpack.prod.minimize.config.js
[webpack-cli] ModuleNotFoundError: Module not found: Error: Can't resolve 'base/js/dialog'
发生此错误的背景非常复杂,有点可笑:
Windows 10>>Conda环境>>jupyter labextension安装>>npm>>node T
我正在考虑把它作为一种替代品。默认情况下,如果我运行webpack dev服务器(webpack service),但不存在默认文档,请浏览到http://localhost:8080给我一个目录列表。我想在Snowpack中启用相同的行为,但在默认情况下,当我浏览到/时,它会返回一个404 Not Found。是否有一个配置设置或插件,我可以使用它来启用目录浏览,使它的工作方式类似于网页
很抱歉,作为坏消息的传播者,巴德,但我认为这样的事情在雪堆上是办不到的。
两个捆绑包运行的服务器略有不同,
标签: Webpack
webpack-dev-serverpackage.jsonwebpack-4nodemon
项目目录结构
下面是网页配置文件
webpack.config.client.js
const path=require('path');
const webpack=require('webpack');
const CURRENT_WORKING_DIR=process.cwd();
常量配置={
名称:“浏览器”,
模式:"发展",,
//模式:"生产",,
devtool:“评估源地图”,
条目:[
“webpack热中间件/客户端?重新加载=true”,
join(当前工作目录'c
我有一个vendor.js和app.js,它们是由webpack编译的。我想使用一个api_调用方法,该方法位于Chrome/Firefox JS控制台的utilities.jsx中。如何使其在控制台上可用?您需要在utilities.jsx中使用并导出api_调用方法
如果通过module.exports导出api_调用,则可以通过以下配置使其成为全局调用:
[
module: {
loaders: [
{
test: require.resolve("
我使用webpack,在chrome中构建并运行后显示此错误,我不知道如何解决它
我的代码非常简单:
Vue是该库的默认导出,因此您可以这样导入
import Vue from 'vue'
您需要仅导入运行时生成。解释道
将其放入webpack.config.js中
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
尝试像这样导入vue从“vue”导入vue@BelminBedak谢谢,我的原始代码是import*作为vue从
标签: Webpack
react-routerwebpack-2code-splitting
当我导航到/home时,我有一个显示主页图标、关于、设置等的导航栏。显示此导航栏的组件位于HomeContainer中。根据url,我想加载HomeContainer的路由。我用的是wepback 2,代码拆分,react路由器3
这是我的文件
import React from 'react';
import { Router, hashHistory } from 'react-router';
import App from './components/App';
import Porta
我有一个遗留项目,并希望将其从gulp移动到webpack。该项目使用wiredep和gulpinject插件,所以所有代码都依赖于globals,并且没有CommonJS/AMD/ES6模块的导入。但据我所知,webpack通过基于模块导入解析依赖关系图来构建捆绑包。是否可以将这样一个项目迁移到webpack,然后逐步更新代码以使用ES6导入并删除全局文件?webpack是否有类似wiredep的功能?您可以建议采用什么方法逐步将project迁移到ES6模块?没有使用wiredep或gulp
因此,我对webpack还比较陌生,在过去的一周里,我一直在努力将其应用到我的项目中,我使用了以下指南:
我设法使大部分的东西工作,但不能使HMR开始工作。
我很感激你的帮助,提前谢谢你
这是我的webpack.dev.config.js文件:
const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const
我正在学习教程,但是我遇到了一个关于web pack的问题。我犯了一个错误,运行了npm audit fix,还有一个更大的错误,就是没有注意到它做了什么
当我尝试运行npm start时,出现以下错误:
「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration
我对DLLplugin的工作原理有点困惑。我使用自己的package.json和另一个带有他的package.json的应用程序存储库,通过使用webpack DLLplugin构建通用供应商包。如果两个package.json文件中的依赖项不同,会发生什么情况?这两个版本共存,还是只有一个dll存在并在我的应用程序中使用
谢谢你的帮助
我有一个相对简单的库,我正在使用Webpack打包。该库可在窗口中使用。我不能让树摇动正常工作。我必须删除未使用的代码,才能使它真正被震撼。大致上,我的代码的结构如下:
entry.js
import Formatters from './formatters/formatters';
export { Formatters };
formatters/formatters.js
import { formatAttribute, prettyPrint } from './formatte
是否可以在Webpack中使用splitChunks,将所有节点模块依赖项放在两个不同的供应商区块中
我不希望它们都在一个块中,因为块变得太大,我不希望块的数量不受控制,因为这可能会导致太多块(比如10-20)
我们的应用程序构建在Next之上,目前我们正在将音频录制引擎从脚本处理器迁移到音频工作集API。(当然是向后兼容)部分过渡也在升级到Webpack 5。我们正在利用网络工作者和音频工作集。在切换到Webpack 5之前,我们使用了Webpack 5,它提供了对工人的本地支持。它对这两个方面都非常有效,但是随着过渡,我们不能再依赖它了,因为它使用了过时的webpack API,接下来是它自己的捆绑Webpack4和Webpack5,它们似乎没有向后兼容
现在的挑战是如何将Webpack5与Next
上一页 1 2 3 4 5 6 ...
下一页 最后一页 共 119 页