Questions tagged «webpack»

是否可以使用webpack定义全局变量以产生如下所示的结果： var myvar = {}; 我看到的所有示例都使用外部文件 require("imports?$=jquery!./file.js")

138 javascript  webpack  webpack-2  webpack-3 

我的错误输出： 无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。-configuration.module具有未知的属性“ loaders”。这些属性是有效的：对象{exprContextCritical？，exprContextRecursive？，exprContextRegExp？，exprContextRequest？，noParse ?、规则？，defaultRules？，unknownContextCritical？，unknownContextRecursive？，unknownContextRegExp？，unknownContextRequest？，unsafeCache？，wrappedContextCritical？，wrappedContextRecursive？，wrappedContextRegExpcursive？ ？，strictExportPresence？，strictThisContextOnImports？}->影响普通模块的选项（NormalModuleFactory）。 我的webpack.config.js： var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: APP_DIR + '/index.jsx', module : { loaders : [ { test : /\.jsx?/, include : APP_DIR, loader : 'babel-loader' } ] …

136 reactjs  webpack 

我在玩React和ES6使用babel和webpack。我想在不同的文件中构建多个组件，将其导入单个文件并将其与webpack 假设我有几个这样的组件： my-navbar.jsx import React from 'react'; import Navbar from 'react-bootstrap/lib/Navbar'; export class MyNavbar extends React.Component { render(){ return ( <Navbar className="navbar-dark" fluid> ... </Navbar> ); } } main-page.jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyNavbar from './comp/my-navbar.jsx'; export class MyPage extends React.Component{ render(){ return( <MyNavbar /> …

135 reactjs  ecmascript-6  webpack 

我的React项目中的图片有问题。的确，我一直认为src属性的相对路径是建立在文件架构上的 这是我的文件架构： components file1.jsx file2.jsx file3.jsx container img js ... 但是我意识到路径是建立在URL上的。在我的组件之一（例如到file1.jsx中）中，我有以下内容： localhost/details/2 <img src="../img/myImage.png" /> -> works localhost/details/2/id <img src="../img/myImage.png" /> -> doesn't work, images are not displayed 如何解决这个问题？我希望在react-router处理的任何形式的路由中，所有图像都可以使用相同的路径显示。

135 javascript  reactjs  webpack 

我有一个简单的应用，由初始化angular-cli。 它显示一些与3条路线有关的页面。我有3个组成部分。在这个页面上我使用一个lodash与角2 HTTP模块来获取一些数据（使用RxJS ObservableS，map和subscribe）。我使用简单的显示这些元素*ngFor。 但是，尽管事实上我的应用程序非常简单，但我还是得到了一个庞大的捆绑包和地图。我不是在谈论gzip版本，而是gzip压缩之前的大小。这个问题只是一般性建议查询。 一些测试结果： ng构建 哈希：8efac7d6208adb8641c1时间：10129毫秒块{0} main.bundle.js，main.bundle.map（主要）18.7 kB {3} [初始] [呈现] 块{1} styles.bundle.css，styles.bundle.map，styles.bundle.map（样式）155 kB {4} [initial] [rendered] 块{2} scripts.bundle.js，scripts.bundle.map（脚本）128 kB {4} [初始] [呈现] 块{3} vendor.bundle.js，vendor.bundle.map（供应商）3.96 MB [初始] [呈现] 块{4} inline.bundle.js，inline.bundle.map（内联）0字节[输入] [呈现] 等待：10Mb的供应商捆绑包是否提供了如此简单的应用程序？ ng build --prod 哈希：09a5f095e33b2980e7cc时间：23455ms块{0} main.6273b0f04a07a1c2ad6c.bundle.js，main.6273b0f04a07a1c2ad6c.bundle.map（主要）18.3 kB {3} [初始] [呈现] 块{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css，styles.bfdaa4d8a4eb2d0cb019.bundle.map，styles.bfdaa4d8a4eb2d0cb019.bundle.map（样式）154 kB {4} [initial] 块{2} scripts.c5b720a078e5464ec211.bundle.js，scripts.c5b720a078e5464ec211.bundle.map（脚本）128 …

135 angular  webpack  angular-cli 

我是reactjs的新手，我想在我的react应用程序中包含引导程序 我已经安装了引导程序 npm install bootstrap --save 现在，要在我的react应用程序中加载bootstrap css和js。 我正在使用webpack。 webpack.config.js var config = { entry: './src/index', output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 8080, historyApiFallback: true, contentBase:'./src' }, module: { loaders: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } …

135 twitter-bootstrap  reactjs  webpack 

更新：2018年12月（请参阅``Aniket''答案） 使用Angular CLI 6时，您需要使用构建器，因为不建议使用ngject，并且很快将在8.0版本中将其删除。 更新：2018年6月：Angular 6不支持ng弹出** 更新：2017年2月：使用ng弹出 更新：2016年11月：angular-cli现在仅使用webpack。您只需要使用npm install -g angular-cli正常安装即可。“我们将beta.10和beta.14之间的构建系统从SystemJS更改为Webpack。”，但实际上我只使用angular-cli来生成结构和文件夹，然后再手动使用webpack config 我已经安装了角度cli： npm install -g angular-cli@webpack 当我使用angular1和web pack时，我曾经修改过“ webpack.config.js”文件以执行所有任务和插件，但是我在使用angular-cli创建的这个项目上看不到谁可以工作。这是魔法？ 我看到Webpack在工作时正在工作： ng serve "Version: webpack 2.1.0-beta.18" 但我不明白angular-cli配置的工作方式...

131 angular  webpack  angular-cli 

我已经开始使用webpack2（确切地说是v2.3.2），并且在重新创建配置后，我一直遇到一个我似乎无法解决的问题（对丑陋的转储表示抱歉）： ERROR in ./src/main.js Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' resolve 'components/DoISuportIt' in '[absolute path to my repo]/src' Parsed request is a module using description file: [absolute path to my repo]/package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration aliased …

131 npm  webpack  commonjs  webpack-2  package.json 

我是webpack的新手，我正在转换现有的Web应用程序以使用它。 我正在使用webpack捆绑并缩小我的JS，这在部署时很棒，但是这使得在开发过程中进行调试非常困难。 通常，我使用chrome的内置调试器来调试JS问题。（或Firefox上的Firebug）。但是，对于webpack，所有内容都填充在一个文件中，使用该机制进行调试变得非常困难。 有没有一种方法可以快速打开和关闭捆绑？或打开和关闭缩小？ 我已经看过是否有一些脚本加载器配置或其他设置，但是它看起来并不明显。 我还没有时间将所有内容转换为模块和使用需求。因此，我只需使用require（“ script！./ file.js”）模式进行加载。

130 javascript  webpack 

假设我有这样的类（用打字稿编写），并将其与webpack捆绑在一起bundle.js。 export class EntryPoint { static run() { ... } } 在我的index.html中，我将包含该捆绑包，但随后我也想调用该静态方法。 <script src="build/bundle.js"></script> <script> window.onload = function() { EntryPoint.run(); } </script> 但是，EntryPoint在这种情况下，未定义。那我该如何从另一个脚本中调用捆绑的javascript？ 补充：Webpack配置文件。

130 javascript  html  typescript  webpack 

如何配置Angular和VSCode，以便我的断点起作用？

127 angular  debugging  webpack  visual-studio-code 

我正在学习React.js，正在使用Windows 8 OS。我已经导航到我的根文件夹 1.Created the package.json file by npm init 2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder 3. install webpack globally by typing npm install webpack -g 4. i am also having a webpack.config.js in my root folder which contains the …

125 npm  webpack 

当创建与CLI（v3.7.0）的新项目中，有之间进行选择的选项dart-sass或node-sass编译器。 它们之间如何进行比较，以使其比Vue docs中声明的更为具体？ Sass性能技巧 请注意，使用Dart Sass时，由于异步回调的开销，默认情况下，同步编译的速度是异步编译速度的两倍。为了避免这种开销，您可以使用Fiber包从同步代码路径中调用异步导入程序。为此，只需将光纤安装为项目依赖项即可： npm install -D fibers 另请注意，由于它是本机模块，因此在操作系统和构建环境上可能存在兼容性问题。在这种情况下，请运行npm uninstall -D fibers以解决问题。 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus 编辑2020/01： Vue CLI 4.2.2创建新项目仍然建议dart-sass作为之前的第一个选项node-sass。然而，这里已经确定这node-sass是性能更高的选择，几乎没有人使用dart-sass（ccleve的评论）。 编辑2020/09：阿里巴赫拉米更新了广泛的答案，dart-sass是首选的node-sass被标记为已过时。 太糟糕了dart-sass，因为它是JS编译版本，性能不佳。但是，它的开发人员对此很清楚，并且正在努力提高本期中所述的性能。

122 vue.js  webpack  sass  vue-cli  node-sass 

我对任务运行程序和捆绑程序世界有点陌生，在经历诸如 Grunt，Gulp，Webpack，Browserify ，我觉得两者之间并没有太大区别。换句话说，我觉得Webpack可以完成任务运行者所做的一切。但是仍然有大量示例将gulp和webpack一起使用。我不知道为什么。 对此不熟悉，我可能会朝错误的方向前进。如果您能指出我所缺少的内容，那就太好了。欢迎任何有用的链接。 提前致谢。

117 gruntjs  gulp  bundler  browserify  webpack 

我正在创建一个使用webpack-dev-server和react-router进行开发的应用程序。 似乎webpack-dev-server是建立在以下假设的基础上的：您将在一个位置拥有一个公共入口点（即“ /”），而react-router允许无限数量的入口点。 我想要webpack-dev-server的好处，特别是对生产力非常有用的热重载功能，但是我仍然希望能够加载react-router中设置的路由。 一个人如何才能实现它以使其协同工作？您能以这种方式在webpack-dev-server前面运行快速服务器吗？

117 javascript  reactjs  webpack  react-router