目前，Webpack正在将所有内容（HTML、CSS、JS等）推送到output.path中指定的目录中。理想情况下，我希望将它们分开，以便资产包含在它们自己的特定文件夹中，同时在index.html中维护正确的src属性，该属性由html网页包插件生成 例如： build/ index.html css/ main.49587349.css js/ vendor.52736973.js app.988734120.js

我使用webpack获得Angular2，并运行Priming。PrimeNG依赖于PrimeUI，PrimeUI本身使用主题，其中一个（主题暗）中缺少一个图像（无论如何，它只用于旧浏览器） 但现在，当我使用webpack从中加载css文件时，它告诉我“找不到模块：错误：无法解析“文件”或“目录” 我如何从外部控制css加载器或sass加载器（不确定最终由谁处理）应该忽略它 谢谢！不确定是否有帮助，但delta主题中缺少一个图像。更改主题可能有用。 这可能是webpack/primeui的问题，

基于这个示例（）我创建了一个类似的设置，它需要通过一个环境变量创建子html文件 function generate_page(config) { var tempateUrl = config.templateUrl ? config.templateUrl : 'src/template.html'; return new HtmlWebpackPlugin({ filename: config.filename, template: tem

我正在尝试使用Handlebar生成一些文件，我希望在渲染期间上下文中包含一些配置参数 我们试图创建一个加载器，它可以用于生成把手模板，但似乎无法在上下文中实际传递 { test: /\.html$/, loader: 'handlebars-loader', query: { extensions: ['.html'], **context**: { **// THIS IS A PSEUDO CODE, There doesn't seem to actu

使用npm安装moment.js后： npm安装--节省时间 …我必须在webpack.config.dev.js中放入哪些内容才能不获取： 未定义错误“时刻” 您是否将moment导入到您想要使用它的文件中？正如@JimStewart所说，如果您能向我们展示您是如何导入代码的，那将非常有用（如果可能的话，请提供完整的最小示例！）

我正在使用vue cli，在main.js中导入css文件后 import Vue from 'vue' import App from './App.vue' import 'element-ui/lib/theme-default/index.css' import ElementUI from 'element-ui' Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }) 控制台记录了一个错误

我使用webpack构建vue并使用UglifyJs，但其错误在于： ERROR in index.js from UglifyJs SyntaxError: Unexpected token punc «(», expected punc «:» [index.js:386,6] "dependencies": { "autoprefixer": "^6.6.1", "babel": "^6.5.2", "babel-core": "^6.21.0", "ba

根据@michael jungo的反馈，我在这里改写了这个问题： 我在laravel 5.2上，想用哪个，例如 因此，我理解我需要使用webpack而不是elixir中的browserify。Laravel 5.2没有附带elixir版本6，而elixir版本6是添加了网页包支持的地方。我无法升级到laravel>5.3，因为我无法在生产服务器上轻松升级我的php版本。所以我正试图让elixir 6与laravel 5.2一起使用，这样我就可以使用webpack并设置这个别名，这样我就可以使用

我最近正在为我的项目切换到网页包（Angularjs 1，AdminLTE，SPA） 有登录页面和登录后页面。 对于登录页面，我需要jquery、bootstrap等， 对于登录后的页面，我需要上面所有的加上数据表等 所以我设置了我的webpack.config var path = require('path'); var webpack = require('webpack'); const basepath = 'resources/assets/js/angular/'; module

项目结构如下： |- SRC |-- COMMON |---- SCSS |------ GLOBAL.scss |------ VARIABLES.json (scss colors in json structure) |-- PAGES |---- COMPONENTS |------ COMPONENT A |-------- SCSS |---------- componentA.scss |------ COMPONENT B |-------- SCSS |---------- c

我正在使用Webpack和Babel构建和传输我的ES6代码。但是，在尝试支持旧浏览器时，我缺少重要的多边形填充。e、 g第8条 这是我的Webpack.config const versions = { v1: './src/js/v1.js', v2: './src/js/v2.js', v3: './src/js/v3.js', }; module.exports = { entry: versions, output: { path: __dirname +

我有一个使用AMD的依赖项，我想使用webpack导入它。依赖项定义了几个命名的AMD模块，并且我希望能够在导入时选择WebPobe应该考虑的入口点。webpack似乎立即执行所有已定义模块的工厂，而不是将其延迟到第一次导入 简化示例： webpack.config.js const path = require("path"); module.exports = { entry: "./src/index.js", output: { filename: "bundle.js

我有以下文件： /*variables.scss*/ ：根{ --颜色：红色； } /*button.scss*/ .颜色{ 颜色：var（--颜色）； } 然后我在JS中导入： /*index.js*/ 导入“/variavles.scss”； 导入“/button.scss”； 我正在使用它的值替换变量，但是使用它不起作用，因为有两个单独的文件，所以postsss释放变量的上下文：（） 所以我的问题是：有没有一种方法可以只在所有文件连接成一个后调用postss插件

我正在开发一个组件，用于按名称渲染文件夹中的图标。这是我的组件文件： <template> <div> <img :src="path"> </div> </template> <script> export default { name: 'ballicon', computed: { path () { return require(`./svg/${this.name}.s

我有一个关于在Vue js应用程序的构建过程中创建的chunk vendors.js文件的快速问题 这是什么？ 它是如何创建的 我提出这个问题的原因是为了更好地理解某些事情是如何在其中结束的。我发现它实际上有一些我不想要的东西。chunk vendors.js，正如它的名字所说，是所有模块的捆绑包，这些模块不是你自己的，而是来自其他方的。它们被称为第三方模块或供应商模块 通常，它表示（仅和）来自项目的/node\u modules目录的所有模块 在webpack 3中，您必须自己做，并且必须做一

我遵循中给出的示例： 您下面的教程使用的是Typescript语法，而您的网页配置似乎没有处理Typescript。您需要研究使用typescript。简单的谷歌搜索将为您提供许多教程，但这是一个良好的开端： 或者，您可以从示例中删除typescript方面。它们通常是带有和的位： import {Subject} from 'rxjs'; const subject = new Subject<number>(); // more code... You may need a

除了汇总，Webpack的sass资源加载器是否有一个等价物？ 我希望能够使用在我拥有的每个scss文件中全局定义的sass变量，而不必将它们全部导入文件顶部 谢谢 我也有同样的问题，这一个对我很有效 请在答案中添加代码，作为参考的外部链接很好，但将来可能不可用

我试图在现有的angular 6应用程序中添加ServiceWorker插件，该应用程序具有webpack bundler。遵循中给出的步骤 package.json { "name": "cloud-complince", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "webpack --mode production", "test": "n

我正在用Aurelia2启动一个新的typescript项目。 它让我在Webpack和Dumber之间做出选择。 我不知道在这两者之间选择什么。 我对模块装载机的要求是： 易于在Chrome中调试（我想毫不费力地在Chrome中调试typescript文件）-这是最重要的 易于使用（我不想把配置文件弄得太乱。我希望npm安装外部模块并使用它） 我希望能够使用外部文件，如图像、css、less、外部javascript库（不是通过npm安装的），而无需太多努力 性能对我来说不是问题。 请帮我选择

我有以下网页包配置 const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { devServer: { contentBase: path.resolve(__dirname, 'dist'), compress: true,

我正在使用单个spa创建我的应用程序。 当我加载micro frontend应用程序时，我没有使用SystemJS，如下所示： export const runScript = async (url: string) => { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.

我正在处理Webpack5，正在处理一个奇怪的问题 开发服务器找不到我的资源（图片、SVG），但是js文件和css文件可以正常工作。如果我从图像文件加载器（在webpack.conf中）中删除outputPath:“/assets/images”值，那么文件将存储在主文件夹中并工作 所以我的想法是资产文件夹没有传输到dev服务器 我用任何配置设置、文档等测试了大约6个小时，但它不起作用 这是我的webpack.conf const MiniCssExtractPlugin = require(

我正在尝试使用Webpack5构建我的模板文件。问题是正在生成的背景图像的路径是“basic project/dist/stylesheet/img/webpack bg.png”，而应该是“basic project/dist/img/webpack bg.png”。附件是webpack.config.js文件截图 看起来你把一切都安排好了。正如您所提到的，实际问题来自output.publicPath值。基本上，在大多数情况下，正确的设置应设置为/： //webpack.config.js

我有一个项目类型脚本项目，并使用RxJs。运行构建时，这是对webpack的简单调用，我得到错误： TS7016: Could not find a declaration file for module 'rxjs'. '<mypath>\node_modules\rxjs\index.js' implicitly has an 'any' type. 这是因为您使用的是旧版本的TypeScript。在您的开发依赖项中，您有版本^3.8.3，非常感谢。有道理，我想就是这样。 {

我试图做的是结合html加载程序复制从html模板引用的资产，例如和文件加载程序，将这些html模板复制到bundle文件夹中我不想将那些html文件直接嵌入javascript包中 我以为这样行得通，但事实并非如此： { test: /\.html$/, loaders: ['file-loader?name=templates/[name]-[hash].[ext]', 'html-loader'] }, { test: /\.jpg$/, loader: '

顺便说一下，我正在使用Webpack2-v2.1.0-beta.25 我试图向我的框架的用户提供有用的错误反馈，但我正在努力找出这三项之间的区别： 构建错误 stats.compilation.errors stats.compilation.warning 构建错误似乎总是null，即使我故意添加错误也是如此。 stats.compilation.errors输出我需要的有用错误，并 stats.compilation.warning在我看来似乎没有输出任何东西 我有一些代码来说明我的观点

我有以下代码： import React from 'react'; import { connect } from 'react-redux'; import { push } from 'react-router-redux'; import { bindActionCreators } from 'redux'; import Immutable from 'immutable'; import { createSelector } from 'reselect'; import Envi

我有以下资料： var webpack = require('webpack'); var path = require('path'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var BUILD_DIR = path.resolve(__dirname, 'public/js/'); var APP_DIR = path.resolve(__dirname, 'jsx'); var config =

我想知道在添加对SASS的支持（npm install SASS loader node SASS--save dev）之后，如何为生产部署正确配置webpack（create react app） 开发配置工作正常，但一旦我运行npm build构建就会失败 相关片段： webpack.config.dev.js loaders: [ { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$

更新到webpack 2后，eslint输出额外的 如何删除这个 我试图更改webpack stats config和eslint config，但这没有帮助。可能不是显示附加信息的网页，而是代码编辑器中的一个eslinter，或者可能在package.json中设置了一些东西，比如npm run lint--watch

我有一种情况，我正在添加一个包含破坏参数的中间件 当它在谷歌浏览器中打开时，工作正常，但在IE浏览器中就失败了 这是我的网页配置文件 var path=require（'path'）； var webpack=require（'webpack'）； var HtmlWebpackPlugin=require（'html-webpack-plugin'）； var AppCachePlugin=require（'appcache-webpack-plugin'）； var appConfig=r

如何使用VueJs with webpack包含并初始化项目中资产文件夹中的javascript文件mymain.min.js Webpack.base.conf resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'sauJs': path.resolve(__dirname,

我有一个简单的Vue客户端，它是用Vue CLI在Webpack方面构建的。它在我本地的Linux机器中运行良好。在我将它部署到谷歌云之后，它就不再运行了。以下是我点击应用程序Url时的日志消息 2017-08-15 19:44:09 default[20170815t122042] 2017-08-15 19:50:15 default[20170815t122042] throw err; 2017-08-15 19:50:15 default[20170815t122042]

在我的Vue+Webpack项目之前的版本中，dist文件夹js文件大小只有4MB 我添加了一个新函数并再次运行build，现在包大小增加到12MB 函数具有以下行 chapterselected=require（'assets/json/ml/'+chapterfile+'.xml.json'） 在其中，如果我对这一行进行注释，包将再次为4mb search() { /// some codes chapterselected = require('assets/json/ml/'

我的网页包配置如下所示： entry: { app: './public/javascripts/app.js', /* ...like 10 more entry points here... */ //I want this one to have a hash in the filename newThing: './public/javascripts/newThing.js' }, output: { path: outputPa

我正在尝试设置react应用程序 package.json： { "name": "react-redux", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "babel-polyfill": "^6.26.0", "react": "^16.3.2", "react-dom": "^16.3.2" }, "scripts":{ "

我使用Webpack4，需要在构建comand后优化和缩小css。 我发现优化css资产网页包插件，但这个插件不工作。 您是否使用这些插件或加载程序来优化css？我们是否需要使用它？对于webpack 4，您需要自带。要缩小输出，请使用类似optimize css assets webpack插件的插件。 但是，请注意，设置optimization.minimizer会覆盖webpack提供的默认值，因此请确保还指定了JS minimizer： const UglifyJsPlugin = re

我已经安装了npm版本5.60 在my package.json中，我有以下两个devdependency： "webpack": "~1.12.15", "webpack-cli": "^3.0.2" 每当我在命令行中输入webpack或webpack-v时，我总是收到相同的响应： One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: - we

目前我正在使用.NET Core 2.0、Angular 6，并使用VS2017作为我的编辑器 Webpack 4.16.3不符合package.json文件中的模式设置 这是我的package.json文件 "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }, "devDependencies": { "@angular/animations": "6.1.0", "@

我不能编译更少的文件。我不知道我在哪里犯了错误。 你能帮我吗 错误是： 未能编译 **./src/less/main.less 1:0 模块分析失败：意外字符“@”（1:0） 您可能需要适当的加载程序来处理此文件类型 @字体大小：字体大小：20px； | |p{** 这是我的webpack.config.js const path = require('path'); const ExtractTextPlugin = require("extract-text-webpack-plugin"

我的代码可以正常工作，但最终在输出目录中出现了不必要的.js文件。我正试图找到一种方法来获得干净的输出。为了明确我的意思，我在下面描述了我的代码： 你可以找到我的项目 Webpack配置如下（，如果有必要，我将使用grunt运行Webpack）： const path=require（'path'）； const webpack=require（'webpack'）； const autoprefixer=require（'autoprefixer'）； const MiniCssExtract

有没有一种方法可以让我们在运行时用webpack传输网页并返回给用户 index.html页面可以有一个webpack.**.js文件 但是它正在访问的页面需要从node.js服务器重新传输运行时 是否有同样的可能性

我无法正确设置Laravel Mix和webpack的PHPStorm。我尝试了在谷歌上找到的每一个解决方案，但没有任何帮助。。。 有什么建议吗？我正在尝试在webpack.config.JS（位于根目录下）中设置CSS的别名和JS的别名 然后我有webpack.mix.js和代码 const mix = require('laravel-mix'); const config = require('./webpack.config'); mix.webpackConfig(config);

我有一个名为“quasar.styl”的文件： 当webpack使用styl loader处理它时，我得到以下错误： failed to locate @import file ~quasar-styl.styl 我有种感觉，触笔有些东西我不明白。它会在哪里寻找文件“~quasar style” 这个文件来自一个正在工作的样板quasar应用程序，在应用程序目录中没有一个名为quasar style的文件，尤其是不是节点模块，我在这里收集了瓷砖，让它查看 有什么想法吗 更新：我在这里上传了qu

我是新来的，所以如果我错过了什么，我很抱歉 我的问题如下： 我将背景图像设置为具有已定义类的div。 图像在sass文件中定义 如果我像这样添加静态路径，它对dev有效： .iconGrey background:url('/statics/icon/grey.svg') background-size: 18px 24px !important background-repeat: no-repeat 如果我现在将其释放到名为test/的子文件夹中，则将解析为//myurl/st

我在react应用程序中使用scss模块，但每次更改样式名，我都会收到错误无法在热重新加载期间解析样式名。如果我没有任何与样式名对应的样式，我也会得到错误。每次重新编译时，我都必须重新启动服务器。我的配置有什么问题吗 webpack.dev.js const webpack = require('webpack') const BrowserSyncPlugin = require('browser-sync-webpack-plugin') module.exports = require(

我有一个使用核心目录的应用程序，除了核心目录外，我还有不同的目录，其中包含扩展核心类的类，并稍微修改了逻辑 我有一个像下面这样的文件树 app |-- core | |-- x | |-- y | |-- z | `-- plugins | |-- xyz-helper.js | |-- slightly-modified-logic | `-- plugins | |-- xyz-helper.js 我想使用现有的网页功能来实现类似于“

如果在我的_mobmenu.scss部分中添加以下代码，则在npm运行dev后出现错误 当注释这部分代码时，我没有错误 @keyframes openbt { from { :before { content: '\f0c9'; } } to { :before { content: '\e804'; } } } @keyframes closebt { from { :before { content: '\f0c9'; } } to { :before { cont

对于外部库，我需要获取css路径（url）。 在webpack中创建了一些条目，例如： entry: { main: './js/index.js', style: './css/index.css }, output: { filename: '[hash]-[name].js', } 结果路径，如”/dist/1c76c7f888536c8f6a48 style.css“（可以从manifest.json获取此相对url） 问题：我需要在index.

我的配置是否有误？我的期望是将图像最小化网页包插件作为一个单一步骤使用，编译整个项目模块，这是不正确的吗 此配置导致所有测试的映像资产文件出现以下错误。图像文件仍然被压缩和发射；然而，我不希望出现错误 冲突中的错误：多个资产向同一文件名发出不同的内容。/imgs/[…] new ImageMinimizerPlugin({ test: /\.(png|jpe?g)$/i, deleteOriginalAssets: true, minimizerOpt