Articles of webpack

Dokku找不到'webpack'

推送使用webpack到dokku的应用程序时遇到问题。 Webpack本身位于package.json的devDependencies中。 一旦推动,它开始安装node_modules。 但是一旦开始执行“postinstall”脚本,它就会显示以下内容: sh: 1: webpack: not found npm ERR! Linux 3.16.0-30-generic npm ERR! argv "/tmp/build/.heroku/node/bin/node" "/tmp/build/.heroku/node/bin/npm" "install" "–quiet" "–userconfig" "/tmp/build/.npmrc" npm ERR! node v0.12.7 npm ERR! npm v2.11.3 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! profortool-app@0.2.0 postinstall: `webpack` npm ERR! spawn ENOENT […]

我如何添加debugging到我的webpackconfiguration

我把我的项目之一从browserify移到了webpack,我只是想知道如何将debugging添加到configuration文件中,类似于browserify –debug以提供源映射。 这是我的webpack.config文件: module.exports = { entry: './src/js/main.js', output: { filename: 'bundle.js', path: './src/public/', publicPath: 'public' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader' } ] } };

巴贝尔有import声明的麻烦

我有一个项目,我正在使用ES6中的节点在使用babel节点运行。 现在我试图以更多的生产方式来实施babel,并尝试了两次尝试。 带有以下configuration的Webpack babel-loader: module.exports = { entry: './src/cloud/main.js', devtool: 'source-map', output: { path: './src/static/build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: [ 'babel-loader?presets[]=es2015', ], }, { test: /\.css$/, loaders: [ 'style-loader', 'css-loader', ], }, { test: /\.html$/, loaders: [ 'raw-loader', ], }, ], }, } 它开始抱怨在main.js中的import语句,并沉默它我用?presets[]=es2015 ,我发现在一个类似的问题。 然后,问题到达,在这个问题中,它被过滤到去往node_modules的导入语句,并带有以下消息: […]

Webpack节点全局模块

如何在浏览器中configurationwebpack.config.js到全局节点模块? 我试过了: { global : true, process: true, }, 发生构build错误: 找不到模块'fs'。 { fs: 'empty', } 我试过在js文件中调用fs.existsSync(path) 。 在浏览器错误发生: fs.existsSync不是一个函数。

安装webpack来分离依赖?

我正在浏览一个关于webpack的教程(第三天,仍然是任何东西都混淆了!)和我梳理命令: npm i webpack –save-dev 上面的命令将webpack作为节点模块安装到“–save-dev”中? 我困惑什么“ – 保存 – 开发”是。 这是一个正常的webpacks使用? 这个依赖关系还保存在哪里? 我没有在webpack.config.js或package.jsonfind任何关于它的引用? 非常感谢

如何以及在哪里开始学习与节点,webpack,redux,反应?

我想做一个web应用程序前端的节点,webpack,redux,反应和后端与rails api项目。 我没有find任何教程与所有这些。 我需要一些解决scheme,我必须开始学习和创build我的项目? [有很多教程/电子书/文件分开的每个部分,但我需要一个单一的教程或文档中的这些部分的path]还想要一些教程如何我可以连接到rails api项目和前端项目?

如何使用webpack从npm依赖关系编译.less文件?

我正在使用npm模块elemental ,它包含一个/less文件夹以及所有相关样式的反应UI。 我目前正在试图用less-loader来做到这一点: /tasks/config/webpack.js : 'use strict'; let path = require('path'); let ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = function(grunt) { grunt.config.set('webpack', { client: { entry: { app: `${process.cwd()}/src/app.jsx`, }, output: { filename: '[name].js', chunkFilename: '[id].js', path: `${process.cwd()}/dist`, }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components|dist)/, loader: 'babel', query: { presets: ['react', 'es2015'], }, }, […]

Webpack正在改变我的.scss样式表类

我使用npm和react.js的webpack,我有我的style.scss样式表来控制我的风格,等等。我知道它被合并成一个大的.css文件,因为'webpack东西',但我一直未能正确使用classes / id。 我发现了为什么。 这,在我的style.scss表: /* List items when hovered. */ ul li.hovered{ background-color: #F8F8F8; color: #7B8585; } 变为: /* List items when hovered. */ ul li.style__hovered___j0Fpj { background-color: #F8F8F8; color: #7B8585; } 在组合的style.css文件中。 这解释了为什么如果我尝试手动设置一个类,例如$('#id').toggle("hovered")它不起作用,但$('#id').toggle("style__hovered___j0Fpj") 。 这个奇怪的string持续刷新页面,所以我认为在我的代码中使用它是“安全的”,但是为什么webpack会破坏这样的类名? 有没有办法阻止它这样做? 或者这就是它的“本意”? 这是我的webpackconfiguration: var path = require('path'); var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); var ExtractTextPlugin = […]

webpack 1:resolve.alias不会将一个npm模块别名

我有一个webpackconfiguration用于为同构React应用程序创build一个服务器包。 在这个configuration里面,我试图使用resolve.alias别名一个模块( parse )作为另一个( parse/node )。 这个关于webpack文档中的resolve.alias的方便的图表看起来应该是可能的。 这就是我的别名对象的样子: alias: { parse: 'parse/node', pubnub: 'static/deps/pubnub/pubnub-3.13.0.min.js' } 我已经为模块pubnub使用了别名,并且该别名在预期的情况下工作。 不幸的是,无论我对parsing键做什么,似乎都不会改变我的webpack构build的bundle.js的结果需求: /***/ function(module, exports) { module.exports = require("parse"); /***/ }, 我试图解决/node_modules/parse/node.js 。 使用绝对/相对path似乎没有工作,也没有添加一个.js扩展到最后。 在这一点上,我不知道这是一个webpack的bug或我忽略的东西。 任何帮助将不胜感激! 这是一个链接到我的完整的webpackconfiguration的要点: https ://gist.github.com/daleee/a0025f55885207c1a00a node@5.7.0 npm@3.7.5 webpack@1.12.14

Webpack CLI忽略.babelrc

我正在尝试使用wepback cli来构build一个非常简单的脚本…非常多: import 'somelib'; import '../mylib'; 我在跑 webpack –output-filename index.js foo.js 但是这给了我: 错误在./foo.js中 模块parsing失败:/dir/foo.js第1行:意外的令牌 你可能需要一个合适的加载器来处理这个文件types。 | 导入'somelib'; | 导入'../mylib'; | 这表明webpack没有正确地预处理这些文件,但是我在同一个目录下有一个.babelrc文件: { "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime", "transform-regenerator", "syntax-async-functions", "transform-async-to-generator"] } 我确实已经安装了相应的babel预设和插件,事实上babel在foo.js上可以正常工作。 我为Babel和Webpackfind的文档似乎都会说它会自动使用.babelrc而且我没有看到任何webpack的cli标志 ,可以让你指定babelconfiguration,包括插件/预设。 有没有什么办法可以让webpack cli使用我在.babelrc指定的插件和预设?