标签: Webpack
babeljsecmascript-2016fluxible
我试着按照fluxible connectToStores示例中使用装饰器模式的说明进行操作
您需要使用阶段0支持设置Babel:您需要使用阶段0支持设置Babel:仅供参考,decorator不是ES6的一部分。仅供参考,decorator不是ES6的一部分。在文档中找不到说明,但我确实找到了此链接,该链接建议放置查询:{stage:0}在webpackConfig.module.loaders中,但现在我得到了错误错误:无法定义“查询”,并且在加载程序列表中有多个加载程序无法在文档中找到说
我是vue.js新手,尝试使用v-for指令呈现图像列表。相反,我得到服务器的响应状态为404(未找到)。我正在使用生成的
webpack url加载器应该将item.src对应的图像的url更改为某种[name].[ext]?[hash]格式,但它只是将它们单独放置(实际上结果url是http://localhost:8080/assets/computer.jpg)
这是我的代码:
近期研究
近期研究课题
{{item.text}
{{item.extra}
出口
违约{
数据(){
返
标签: Webpack
react-routerreact-slingshot
我正在为我的react/redux应用程序使用react slingshot starter项目。当我使用像/foo这样的路由时,热重新加载非常有效,但我发现热重新加载在像/foo/bar这样的子例程上不起作用。我没有对开箱即用的网页包配置文件做任何更改,可以在这里找到
我得到404得到http://localhost:3004/orders/c344e97ed1fbc2923017.hot-当我具有以下路由配置时,在CreateOrder组件上更新.json 404(未找到):
<Rou
也许你能成为我这一天的救世主
我正在尝试在我的扩展中实现vue组件
我不能包含自定义Vue.js组件。我随后创建了一个组件,该组件应提供一个模式字段,该字段应包含在扩展的设置视图中。这个模式应该在同一个页面上使用多次,内容不同,因此我更喜欢使用自定义组件,而不是在设置视图中反复硬编码(views/settings.php)
为了存档,我创建了以下文件:app/components/template.vue
<template>
<div>Test</div>
像这样的webpack.config.js文件可以导出多个配置:
module.exports = [{entry: 'a.js'}, {entry: 'b.js'}];
调用webpack时,如何从CLI中选择一个配置?当前无法从CLI的阵列中选择一个配置。最好是创建两个额外的配置文件(每个文件引用主文件中两个配置中的一个),并将webpack指向该配置
例如:
webpack.a.config.js
var allConfig = require('./webpack.config.js'
我使用HTMLWebpack插件和HTMLWebpack模板,它支持将内容“注入”到与WebpackDev服务器中的HTMLWebpack插件提供的html相关的窗口中
在本例中,我实际上是根据同级模块的需求生成下面的“uiContext”。我想做的是观察该模块的变化,然后在发生变化时,告诉webpack dev服务器重新加载(对uiContext的变化)
想法
var HtmlWebpackPlugin = require('html-webpack-plugin');
var htmlWeb
标签: Webpack
bootstrap-sasssass-loader
我刚刚进入了webpack,但现在当我试图从index.scss文件中包含引导sass时,它突然发作了
此webpack conf工作正常,并将.css文件输出到css/stylehseet.css
'use strict';
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
st
例如,在执行webpack--watch之后,每当发生更新事件E时,我希望:
在E之前:删除某个文件夹中的某些文件
在E之后:扫描某个文件夹中的文件名,并以某种格式将其写入某些文件
总之,在E发生之前和之后执行一些节点代码。提供了此配置文件
module.exports = {
output: {
path: 'dist',
publicPath: '/static/',
filename: "bundle.[hash].js",
我正在将项目移动到webpack2,但jQuery.initialize有问题
require('jquery');
require('jquery.initialize/jquery.initialize.min.js');
$(document).ready(function () {
// ========================================
// comment editor.
// ===============================
我已经用vue2启动了一个新项目,“vue init webpack my project”我正在使用手写笔进行样式设置。到目前为止,一切都很好
但是现在我想要一个单独的文件variables.styl,它应该是全局的
这意味着我不想在我应用程序中的每个.styl文件中使用“@import('variables.styl')”。我已经搜索了2个小时,没有找到任何好东西
为了这篇文章的篇幅,我不会在这里复制粘贴网页文件的内容。但将为您提供以下链接:
它是我项目中包含网页包文件的“build”目录
例如在网页包中
const query = {text: "test"};
require(`template/test.tpl?${query}`);
正如您所知,webpack可以将句子视为在运行时运行的动态需求。但是我需要require('template/test.tpl?${query}')在构建时运行
有办法吗
附言:
选项可以通过查询参数传递,就像在web上一样(?key=value&foo=bar)。也可以使用JSON对象(?{“key”:“value”,“foo”:“bar
我正在尝试将LocaleProvider添加到我的应用程序中,以将antd组件以英语(而不是默认的中文)显示。我按照以下指示:
我的网页配置的相关部分:
externals: {
"react": "React",
"react-dom": "ReactDOM",
"antd": "antd"
}
当我尝试LocaleProvider文档中描述的第二种方法时:
const { LocaleProvider, locales } = window.antd;
...
我对Webpack很陌生,所以我可能完全错过了一些东西
我已经为我自己的代码设置了Babel,并且工作正常,但是Webpack在ES2015中输出了部分代码,所以当我使用Ugilfy捆绑包时,当它到达第一个let时,我就会收到一个错误。如果需要,我可以发布我的配置。您仍然需要通过webpack中的加载程序运行代码,否则webpack将无法将代码传输到ES5
检查
我们需要查看您的配置。另外,如果您查看输出代码,是否可以看到是您自己的代码包含let still,还是节点_模块?
module: {
标签: Webpack
service-workercreate-react-appsw-precache
我正在通过create react app使用sw precache来启用我的应用程序以供脱机使用。我有一个通过webpack加载的视频,但我注意到它没有包含在生成的serviceworner的precacheConfig数组中
如何强制webpack/sw precache将(散列)视频包含在要预取的URL列表中?因此您希望缓存视频以便在脱机模式下播放?@MatthewBarbara,是的,但如果我在脱机之前播放完整的视频,我已经可以这样做了,或者通过fetching视频并将blob保存到In
标签: Webpack
handlebars.jswebpack-2webpack-plugin
我正在做一个有很多不同模板的项目,目前大约有67个。每次我在1个文件中做一个更改,Webpack就会开始重新编译每个把手模板,这使得它非常慢
我想知道是否有办法减少工作量/优化速度
网页包中的“我的把手”工作流如下所示:
var Handlebars = require('handlebars-webpack-plugin');
....
....
new Handlebars({
entry: path.join(process.cwd(), "src", "layouts",
我已经为一个新的React项目配置了webpack开发服务器。我正在使用babel loader来传输ES6代码。在以前的项目中,我们能够在传输之前检测javascript代码中的明显错误,例如缺少导入语句或未定义的变量
为什么webpack/babel loader没有检测到明显的错误?我如何配置babel loader以不传输这些错误,而是记录到命令提示符
这是我的package.json
{
"name": "advent-calendar",
"version": "1.0.0"
我需要在远程服务器的docker构建过程中构建它,所有输出消息都将在空闲通道中打印。部署过程在服务器中停止,但由于输出消息很长,我无法检查哪部分出错。我需要把它藏起来
下面是命令:NODE\u ENV=production NODE\u modules/.bin/webpack--config webpack.config.js--hide modules
和配置:
'use strict';
const path = require('path');
const glob = require(
我有旧的js脚本需要改进。我想用babeljs编写es6风格的代码,用wepback3中的minify将其编译成es5标准。如何将webpack设置为只解析文件,将它们保存在另一个目录中而不捆绑它们?根据定义,webpack是一个模块捆绑器-虽然可以使用插件将其破解为逐文件复制,但我不建议这样做
取而代之的是,直接使用-它将根据您传递给它的内容来显示单个文件或整个目录。它还有一个--minfied选项,可以为您缩小输出,而无需手动将文件导入UglifyJS
./node_modules/.bin
我正在尝试为一个API键设置一个环境变量,我不想在代码中使用它。我的源javascript如下所示:
.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)
我正在使用webpack和包dotenv webpack在gitignored.env文件中设置API_密钥,并且在我的本地计算机上运行良好。我还希望在通过Netlify部署时能够设置该变量,我已经尝试通过GUI将其添加到“build environ
我在Vue.js项目中将我的源代码与webpack捆绑在一起
我知道我有两种方法
1.交叉环境
package.json:
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build": "webpack --progress --hide-modules --config build/webpack.prod.conf.js",
"scripts": {
"dev": "w
我正在使用Webpack4构建一个小型Vue.js项目
在我的App.vue组件的样式块中,我可以将bootstrap.scss导入到我的main.js包中,然后使用mini css extract plugin将其导出到main.css
但是如果我也有自定义样式,Boostrap(供应商)CSS将与我的自定义CSS混合在一起
我想知道,如何让它将引导(供应商)CSS导出到自己命名的散列块中?并将自定义CSS保存在自己命名的哈希块中
看起来您可以使用webpackChunkName魔术注释显式命
我有一个关于网页的问题。我将使用SASS的网页包。我想我的计算机上已经有了节点。我的问题是:
我是否必须再次安装它,还是每次在新项目上工作时都要安装它
我应该安装在项目文件夹还是计算机中
-g表示全局安装,针对的是整个计算机,而不仅仅是当前项目。我应该安装在项目文件夹中还是计算机中?因此,您希望仅针对sass使用webpack?针对sass和ES6。我不知道如何设置。这可能会有帮助:
我正在使用webpack@4.8.1,当我运行它时。我得到这个错误:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration[0] has an unknown property 'optimization'. These properties are valid:
我刚刚使用vue init webpack simple myprojectCLI命令创建了一个基于简单webpack模板的项目。在index.html中,我可以看到:
<html lang="en">
[...]
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html&g
标签: Webpack
react-router-v4react-loadable
我只是尝试将react loadable添加到我的项目中,在我访问我的管理页面之前,它可以正常工作。我目前有webpack 4、react router 4.2.2和react loadable 5.4.0。
我的许可证上有这样的东西:
<Route path="/admin/users" component={LoadableUsers} />
访问localhost:3000/admin/users可以提供以下信息:
Refused to execute script from
标签: Webpack
html-webpack-pluginuglifyjs-webpack-plugin
我一直在为我的项目使用这个网页配置。我想有在“src”目录中的所有文件要处理,并在“www”目录中放置
即:
src/*.css->csso->www/*.css
src/*.html->inline css->html minify->www/*.html
src/*.js->rollup->babel->uglifyjs->www/*.js
webpack.config.js:
const path = require('path');
const webpack = require('we
我正在尝试在ASP.NET核心应用程序中使用webpack。我使用npm下载了jQuery,然后使用webpack生成了一个我在我的_Layout.cshtml中引用的供应商文件。我的webpack.config.js如下所示:
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
vendor: ["jquery"]
},
o
输入:
1) 网页3
2) 带有指向OTF字体文件的URL的Css文件
3) HtmlWebpackPlugin
输出:
1) 包含样式文件链接的Html由css生成,并带有内嵌的base64字体
2) 此css在生成时复制到build dir
我应该使用什么插件来实现这一点
我发现弄清楚应该使用什么插件和工作流程真的很麻烦。如果使用复制webpack插件和html webpack include assets插件,我没有看到显而易见的简单解决方案,因为这似乎是一项简单的任务。你应该像这样更改w
标签: Webpack
mini-css-extract-plugin
当我运行npm运行构建失败时,引用mini css extract插件:
C:\dev\udemy-restfull\webpack\node_modules\mini-css-extract-plugin\dist\index.js:76
const resource = this._identifier.split('!').pop();
^
TypeError: Cannot read propert
我正在使用动态导入创建项目中所有区域设置的块。已创建块,但客户端在运行时报告此错误:
Uncaught (in promise) ReferenceError: locale is not defined
at _callee$ (main.js?f161:72)
at tryCatch (runtime.js?98b8:62)
at Generator.invoke [as _invoke] (runtime.js?98b8:288)
at Generator.prototyp
我正在为一个简单的web express应用程序运行webpack4
当我在开发环境中运行服务器(通过nodemon)时,它运行得非常完美,但当我进入生产环境时,我会遇到这个奇怪的错误(由firestore生产线生成)
错误:package.json不存在于/package.json
我不明白为什么它在根(/)目录而不是dist目录中查找package.json
这是我的webpack.config.js文件:
// webpack.config.js
const path = require
在我的应用程序中,我有两个用于两种类型用户的主屏幕和一个登录页面。当用户打开应用程序时,我检查用户的类型,并根据用户类型打开特定的app root.xml文件
app.js
let currentLogin = appSettings.getString("login", "nothing");
if (currentLogin === 'customer') {
application.run({ moduleName: "app-root-home" });
}
else if (c
我正在运行react应用程序rewired和Webpack4.29.3,并试图加载一个包含优化的配置
以下是我的config-override.js:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = function override(config, env) {
config.optimization = {
minimizer: [new TerserPlugin({})],
标签: Webpack
babeljspackage.jsonbabel-loader
我正在开发一个核心库,在这个库中可以克隆不同的组件并连接它们自己。每个组件目录都有一个package.json文件。我的核心是使用webpack,当我运行build命令时,它会抛出如下错误
ERROR in ./src/clients/products/src/Products.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/mughees/Desktop/mi
标签: Webpack
webpack-4webpack-splitchunks
我处于一种独特的情况下,我需要将我的捆绑包分解成单独的文件,但我没有随着应用程序的增长和新的依赖项的安装等而改变文件总数或文件名的奢侈
下面的配置是错误的,但我认为它将最好地说明我试图实现的目标。我已经通读了所有的文档,但似乎找不到任何与此相关的内容
optimization: {
splitChunks: {
react: {
test: /node_modules\/react/
},
vendor: {
test: /node_modul
这是因为升级了Uglify js,详情如下:
解决办法是:
使用:
而不是:
{
"warnings": value
}
uglifyOptions: {
compress: {
warnings: false,
pure_funcs: ['console.log']
}
}
{
"warnings": value
}
{
"compress":
我不知道如何使用webpack加载图像并做出反应。我尝试了很多选择,但它总是说无法找到文件的哈希名称。我现在正在使用文件加载器
webpack.config
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader"
}
]
}
尝试作为css背景
#盒子{
高度:300px;
宽度:300px;
利润率:20p
使用:babel、网页包、angular 7
这是我第一次编写webpack.config文件,在构建sass加载程序/我的scss文件时遇到了一些问题
我已尝试将sass loader降级为“sass loader”:“~6.0.7”,并添加
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
},
添加到angular.json文件,但这并没有什么区别
这是我的webpack.con
我正在尝试使用next.config.js设置SASS加载程序,但在服务器重新启动后,我的.scss类被忽略。我的文件是否配置错误?任何关于我可能需要添加的设置的输入都将不胜感激
// next.config.js
const withCSS = require("@zeit/next-css");
const withSASS = require("@zeit/next-sass");
const webpack = require("webpack");
const apiKey = JS
我有一个包含html文件的文件夹,它由myHtmlPlugin编译。我希望webpack dev server监视此文件夹中的更改并运行myHtmlPlugin。基本上,我想为自定义插件添加没有入口点的watcher。这可能吗
所有html文件被编译成单个js
此输出被设置为入口点:
在插件类内部,在网页包中默认的apply方法设置为watcher:
在目录中更改文件时,nodejs将所有html文件编译为单个文件,这是webpack服务器的入口点
fs.readdir(directoryPat
当我尝试在我的vue-cli-3项目中包括优化选项(在某些页面中使用monaco editor)时,控制台中出现以下错误:
languageFeatures.js?ff36:85 Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:540)
at eval (webWorker.js?af50:54)
这是我的vue.config.js文件:
co
我正在尝试这样做:
const new_language = "en-US"
await import(`/languages/${new_language}.json`)
但出现以下错误:
Unhandled Promise Rejection: TypeError: 'text/html' is not a valid JavaScript MIME type.
我正在使用包裹捆扎机并安装和导入了babel polyffil您是否在文件的顶层使用wait?这意味着它不在函数内/class
我想升级到最新版本,以使用一些不错的新功能。我使用的是ExtJS,因此我必须使用带有ol全局变量的bundle。我随后创建了它,但它使用了包裹。我还尝试了Rollup、Webpack和Browserify,但没有成功。在使用它们的捆绑包时,我遇到以下错误:
Uncaught ReferenceError: ol is not defined
这是因为我想在这样的代码中使用它:
const map = new ol.Map({
target: 'map',
layers: [
我想同时在本地主机和本地IP上启动webpack dev server,但不使用主机0.0.0.0,因为它会登录到控制台“project正在以0.0.0.0运行,但我想查看本地主机”
我看到“chunks”这个词经常出现在rollup.js的文档中,但是对于“chunks”的确切含义没有额外的定义
“块”是通用术语还是特定于rollup.js?在rollup.js的上下文中,这意味着什么?顺便问一下,我在网页的文档中也看到了相同的单词,是相同的东西吗?(无论如何,我也无法在网页的上下文中获得它)
我有一个大项目。我使用Pug构建HTML,使用SASS构建样式。
我的项目包含35页,包含include和mixin。
还有其他一些基本的东西,比如图像、样式和脚本。
开发模式下的初始构建需要10分钟。生产中-6分钟。
我觉得太慢了
如何提高建筑速度?有可能使网页包构建速度更快吗
网页包配置:
const path=require(“路径”);
const webpack=需要(“webpack”);
常数fs=要求(“fs”);
const HtmlWebpackPlugin=requir
我们在VisualStudioC#项目中使用webpack来捆绑脚本和样式。这些完成的css和js文件包最后必须放在不同的文件夹中。为此,我想使用webpack中的多编译器
如果我单独运行configs,它会按预期工作,在Content/styles/dist文件夹中创建一个styles.css,在Content/scripts/dist文件夹中创建一个scripts.js。只要我想使用multi-compiler运行这两个配置,就不再创建scripts.js
缩短的webpack.config
我使用三个js并试图从blender导入一个3d模型,我还使用webpack。我试图加载一个glb文件,但无法让它工作。它现在在构建时将文件添加到dist文件夹,但不会更改文件的路径(在javascript文件中)
这是我的档案:
网页包配置
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
watch: true,
module: {
rules: [
为什么HtmlWebpackPlugin没有加载文件favicon.ico
new HtmlWebpackPlugin({
filename: `index.html`
template: `public/index.html`,
favicon: "../public/favicon.ico",
name: 'index',
inject: true
})
.ico文件的相对路径错误。
标签: Webpack
webpack-dev-serverwebpack-4
我在webpack cli中遇到了这个问题
我正在尝试运行此文件网页包:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname , '..dist'),
filena
1 2 3 4 5 6 ...
下一页 最后一页 共 88 页