Tag: webpack

用Webpack编译Scss: 我仍然想把自己的头包裹在webpack上，而来自Gulp的则很困惑。我的项目结构如下所示： ./root — src — styles.scss — bin — node_modules — webpack.config.js 所以，只需要一些简单的东西，我想编译src目录下的styles.scss ，并将其输出到bin目录。我安装了以下装载机：风格装载机 CSS-装载机 sass-loader（也安装了node_sass作为依赖）现在我知道我没有抓住Webpack的一些非常基础的东西，但是这里是我的webpack.config.js ： module.exports = { entry: './src/styles.scss', output: { path: './bin', filename: 'styles.css' }, module: { loaders: [ { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] } }; 当我在我的目录的根目录下运行webpack ，它看起来像是有效的。但styles.css文件看起来像包含一堆JavaScript代码。所以我不明白，需要一些清晰。我隐约猜测，如果您的项目中没有任何JavaScript文件，则不能使用webpack（除了webpack.config.js当然…

混合反应与快递？: 我有一个基于React的应用程序，运行一个基于NodeJS的服务器，并希望允许它下载一个非静态文件，而不使用xhr。我正在考虑使用Express，但我不知道如何使它与React在同一个容器中共存？任何人都可以build议我怎么去这个？我仍然在学习webpack和React，而且我很难find这样的例子吗？ React服务器通过webpack启动： node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js –host 0.0.0.0 –port 8081 –hot –inline 使用webpack-dev-server.js，看起来如下所示： module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: […]

OpenLayers v3与Webpack: 您好，我目前正在使用OpenLayers v3与Webpack。当我不使用UglifyJS时，它工作正常。但是，当我添加我的uglifyJSconfiguration的时候，它不会再编译了我的UglifyJSconfiguration new webpack.optimize.UglifyJsPlugin({ minimize: true, sourceMap: false, compress: { warnings: false, sequences: true, dead_code: true, conditionals: true, booleans: true, unused: true, if_return: true, join_vars: true, drop_console: true } }), 我得到这个错误 from UglifyJs RangeError: Maximum call stack size exceeded 我正在使用dist/ol.js文件。任何想法如何解决这个问题？

Webpack图像加载器通过CSS的dynamic内联的背景图像？: 我使用webpack的反应，我通常导入和使用我的图像，如： import CalNotices from 'assets/img/calendar-notices.png'; <img className='img-center' role='presentation' src={CalNotices}/> 工作正常，当我做生产build设，这些图像区域整齐地放入适当的文件夹。但是，有时候，我想使用图像作为背景，并使用它： const divStyle = { backgroundImage: `url(${item.logo})`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } <div className='image-holder' style={divStyle}></div> item.logo是图像的绝对path。这在开发工作正常，但是当我做一个prod构build，这些图像显然是缺less，因为他们没有被拾起的webpack图像加载器。我应该如何处理这个？我的图像加载器configuration是 { test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, include: [paths.appSrc, paths.appNodeModules], loader: 'file', query: { name: 'static/media/[name].[ext]' } },

为什么我必须再次运行“webpack”命令？: 我正在使用一个React项目。每次在任何.js文件中做任何修改，我都必须在terminal上再次运行“webpack”命令，才能使浏览器反映出来。有什么办法可以让我不必再次运行“webpack”命令。 webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { devServer: { inline: true, contentBase: './src', port: 3000 }, devtool: 'cheap-module-eval-source-map', entry: './dev/js/index.js', module: { loaders: [ { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }, { test: /\.scss/, loader: 'style-loader!css-loader!sass-loader' } ] }, output: { path: 'src', filename: 'js/bundle.min.js' }, […]

Azure Web应用程序来searchvuejs应用程序: 我有一个使用webpack的vuejs应用程序，也可以打包成电子应用程序。该应用程序的结构如下所示： https://github.com/kahwooi/vuetron 它可以在webpack-dev-server上运行。我的问题是应用程序可以在Azure或任何Web服务器上运行？

在Webpack的imports-loader中export => false: 如果我使用的是import加载程序，这意味着exports=>falseconfiguration中的exports=>false部分？它应该注入variablesvar exports = false ，但我不知道什么时候以及为什么需要这个variables。 module : { loaders : [ { test : /eonasdan-bootstrap-datetimepicker/, loader : 'imports?define=>false,exports=>false,moment=moment' }] }

Webpack软件包ENOENT：没有这样的文件或目录fs.readdirSync: 我们希望创build在AWS Lambda上运行的微型应用程序。我们正在为此调查webpack 2。但是，我们使用fs.readdirSync遗留代码来获取文件/模块名称的列表以生成模块列表。当执行包时，我们得到一个错误Error: ENOENT: no such file or directory, scandir '/innerLib'因为webpack不知道执行fs.readdirSync(path.resolve(__dirname, 'innerLib')); 在文件lib/lib.js并在捆绑时间内parsing文件名的数组。我们可以采用wepback，而不对遗留代码进行重大更改。我在下面和github上包含了一个简单的例子 webpack.config.js var path = require( 'path' ); var webpack = require( 'webpack' ); module.exports = { context: __dirname, entry: ['./index.js'], output: { filename: 'bundle.js', }, target: 'node', } index.js const lib = require('./lib/lib.js'); lib.getModuleList((err, modules) => console.log(modules)); […]

我怎样才能编译和运行附加的反应Web应用程序？: 我是新的节点和NPM。我一直在试图编译这个药物提醒应用程序，我发现GitHub（ https://github.com/marshallmurphy/Web-Apps/tree/master/Medication%20Reminder%20React%20App ），但npm不断产生错误。我试过“npm start”并运行“webpack”，但没有运气。我怎样才能在terminal上编译和运行这个文件？运行npm start时出现以下错误： Dantes-MBP:Medication Reminder React App dantegreyson$ npm start > medication-reminder-app@1.0.0 start /Users/dantegreyson/Desktop/Medication Reminder React App > webpack-dev-server sh: webpack-dev-server: command not found npm ERR! Darwin 16.1.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.9.1 npm ERR! npm v4.0.2 npm ERR! file sh npm ERR! code […]

在webpack + nodejs中使用azure应用程序服务，无需长时间部署中断: 我试图用我的（相当大的）NodeJS应用程序使用webpack，使用Git连续部署作为Windows Azure应用程序服务部署。我定制了我的kudu deploy.sh脚本来运行webpack，但是在Azure App Service上需要花费几分钟的时间才能运行，并且在这段时间内应用程序不可用。在我的开发笔记本电脑上，运行webpack只需要大约30秒（我可以接受作为部署中断时间），但我猜测使用SSD的笔记本电脑使这个运行速度更快？如果我使用的是一个部署脚本，我只需要在我的开发机器上运行这个webpack并把结果推送到服务器上，但是我使用git进行连续部署，而且我不想提交不断变化的webpack-生成的代码到Git仓库。有没有办法在Azure应用程序服务基NodeJS应用程序运行webpack-on-deploy部署时没有这么大的停机时间？