Tag: webpack

使用webpack将.scss解压缩到css: 我正在尝试将所有我的sass文件编译到一个style.css文件中，如下所示。我安装了我的npm install –save-dev extract-text-webpack-plugin并且在我的webpack.config.dev.js中是下面的。 const path = require('path'); const webpack = require('webpack'); const WebpackNotifierPlugin = require('webpack-notifier'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'eval', entry: [ './src', ], output: { path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/', }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new WebpackNotifierPlugin({ title: 'My Project Build' }), […]

在Electron + React + Webpack设置中找不到模块“电子”: 我正在使用React + Electron + Webpack创build一个应用程序，但是在尝试使用Electron模块时，我收到错误，指出“无法find模块”电子。我在下面的示例代码中的一个我的React组件： const shell = window.require("electron").shell; shell.showItemInFolder("C:\\Logs"); 我提到了与webpack＆Electron有关的许多问题，但是没有一个解决scheme似乎适用于我。当我尝试下面的代码： require('electron-prebuilt') 它让我回到了电子可执行文件的path。

带有Phantom.JS和Pageres（节点模块）的WebPackconfiguration错误: 我正在尝试导入名为“pageres”（ https://github.com/sindresorhus/pageres ）的节点包模块，该模块使用Phantom.JS截取用户定义的网页。我使用NPM来成功安装pageres，但试图将模块导入到我的项目中时，会抛出“无法parsing模块”child_process“”，“无法parsing模块fs”和“无法parsing模块”净'”。在研究这个问题时，我发现（ https://github.com/cytoscape/cytoscape.js/issues/998 ）的工作是将下面的代码片段添加到我的webpackconfiguration文件中： node: { fs: "empty", child_process: 'empty', net: 'empty' } 问题是，这样做明确了防止webpack编译我的代码的错误，但现在我的应用程序根本不呈现。是否有任何解决方法可用来解决这个问题，任何人都可以解释为什么我以前用“无法解决模块”child_process“的错误来了？附注：我正在使用React-Redux-Universal（ https://github.com/erikras/react-redux-universal-hot-example ）作为我的锅炉，因此React.JS正在处理我的视图。 Webpackconfiguration（位于下面的Universal-reduxconfiguration文件中）： webpack: { /* // A list of libraries that do not change frequently between deploys // and are best served in the vendor bundle. Optional. // // Expects: Array */ // vendorLibraries: [], […]

Webpack分析工具的“提示”部分列出了预取build议中的webpack依赖关系: 我的webpack构build内存不足，所以我试图使用webpack分析工具进行debugging。奇怪的是，没有关于预取的提示包含我的项目的代码。一切都来自node_modules，更具体地说，是webpack模块。这里有几个例子：我检查了这个post：如何使用prefetchPlugin＆分析工具优化webpack的构build时间？但是它并不能真正解释为什么“提示”部分只包含node_modules依赖关系，在读完之后，我仍然不完全确定预取是如何工作的。在第二个例子中，我会预取inherits_browser.js吗？如果是这样，webpack怎么知道什么时候预取呢？编辑：我解决了我的OOM问题，但我仍然好奇为什么分析工具显示这一点。

与webpack-isomorphic工具集成: 我试图开发一个反应同构的应用程序，我最近想出了webpack-isomorphic-tools npm包。我试图按照文档，但不幸的是，图像和样式文件不被识别，并没有被添加到webpack-assets.json文件。直到现在我已经使用这种方法： if(process.env.BROWSER){ include('./style.scss'); } 但是我明白webpack-isomorphic-tools更有用。对于scss和其他样式文件，这是运行服务器时出现的错误： [webpack-isomorphic-tools] [debug] requiring ./shared/Root.scss [webpack-isomorphic-tools] [error] asset not found: ./shared/Root.scss 对于图像文件，在构build期间不显示错误，因为在构build上没有检测到图像。这里是webpack-assets.js ： { "javascript": { "main": "/build/bundle.js" }, "styles": {}, "assets": {} } 相关代码：的WebPack同构的工具-config.js： var webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin'); module.exports = { debug: true, webpack_assets_file_path : 'public/build/webpack-assets.json', webpack_stats_file_path : 'public/build/webpack-stats.json', assets: { images: { extensions: […]

尝试在使用Webpack作为模块Bundler的nodejs应用程序中使用mongoose: 我正在尝试将mongoDB集成到我的nodejs-react应用程序中。我使用mongoose作为orm。它从以下错误开始 WARNING in ./~/mongoose/~/mongodb/~/mongodb-core/~/bson/~/bson-ext/ext/index.js Module not found: Error: Cannot resolve 'file' or 'directory' ./win32/x64/bson in /Users/Johannes/Documents/Development/holmes/node_modules/mongoose/node_modules/mongodb/node_modules/mongodb-core/node_modules/bson/node_modules/bson-ext/ext @ ./~/mongoose/~/mongodb/~/mongodb-core/~/bson/~/bson-ext/ext/index.js 6:10-37 我遇到了类似的问题在stackoverflow，并在我的webpackconfiguration文件进行了必要的更改添加了节点和json加载器。 {test：/.json$/，loader：'json-loader'}， {test：/.node$/，loader：'node-loader'} 添加了parsing和节点对象。解决：{ 扩展名：[''，'.js'，'.json'，'.jsx'，'.es6'，'.babel'，'.node']， modulesDirectories：['node_modules'，'app']}，节点：{ 控制台：是的， fs：'空'，网：“空”， tls：'空'}， npm安装json-loader npm安装node-loader 以下是我的webpackconfiguration文件现在的样子。 var path = require('path') var webpack = require('webpack') var autoprefixer = require('autoprefixer') var ExtractTextPlugin = require('extract-text-webpack-plugin') var assetPath […]

Karma代码覆盖率与Webpack不正确: 我目前正在使用Karma作为我的Webpacktesting运行者。我注意到，没有testing的简单testing文件给我92.86％的报表覆盖率，50％的分支覆盖率，100％的function覆盖率和92.86％的线路覆盖率。 describe('tests.js', function () { }); 当我检查我缺less覆盖范围时，我看到这个代码（第10行），这个代码被Webpack注入到我的模块中，因为没有被testing覆盖： if(installedModules[moduleId]) return installedModules[moduleId].exports; 我不能testing这个，因为Webpack是注入这个代码到模块中。那么如何阻止这类信息被纳入覆盖报告呢？覆盖报告给我的整个呈现文件如下： /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ Iif(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a […]

Webpack：'绑定未定义': 我build立应用程序与nodejs（服务器）和reactjs（客户端）..一切都好，但最近我有一些问题与webpack ..之后，我运行webpack我有一个浏览器控制台中的错误：未捕获的ReferenceError：未定义绑定我不知道这个问题..任何帮助？在这里我的webpackconfiguration： var ExtractTextPlugin = require('extract-text-webpack-plugin') var webpack = require('webpack') module.exports = { entry: [ 'babel-polyfill', './src/client/index.js' ], devtool: 'source-map', output: { path: './src/static/js/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-1'] } }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }, { test: /\.json$/, […]

./node_modules/.bin/webpack -d不运行，说不认可的内部命令: 我正在尝试使用webpack，Npm和babelbuild立一个反应环境。命令./node_modules/.bin/webpack -d总是给出（“。”不是内部命令或path未find或“node_modules”不是内部命令）。我检查了我的目录的内容，它具有node_modules/.bin/webpack/…下的webpack文件夹node_modules/.bin/webpack/… 我什至尝试过全球。但是没有path/.bin ，而是有node_modules/webpack 。在$PATHvariables中我有C:\Users\User\AppData\Roaming\npm\node_modules 我应该添加额外的path，但即使添加npm\node_modules\webpack到上面的命令正在工作的$PATHvariables。请咨询，以便我可以开始发展。谢谢！

Webpack强制通过CLI webpack工具重新渲染（重新编译，重新编译）: Somethimes的webpack不接受我对jsx和scss文件的更改，因此它不会编译更新的main.scss和main.js （有时）。 webpack运行在安装在高山linux轻量级环境中的docker容器中。我想SSH入docker集装箱，并直接通过webpack命令行工具强行重新编译更改。可能有一些像$ webpack –force-complie或者–force-watch之类的手动方式来手动运行main.scss和main.js的重build过程有没有办法做到这一点？这里是我的webpack.config.js文件： const ExtractTextPlugin = require("extract-text-webpack-plugin"); const webpack = require("webpack"); const autoprefixer = require("autoprefixer"); if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { entry: "./assets/shared/main.jsx", output: { path: "public", publicPath: "/", filename: "main.js" }, module: { preLoaders: [ { test: /\.jsx?$/, exclude: /(node_modules)/, loader: "eslint-loader" } […]