Tag: webpack dev server

安装Angular 2 Universal

更新： 我正在尝试使用本指南来安装Angular 2 Universal，但是当我运行以下命令时，出现一些错误。 这里是命令： typings install node express body-parser serve-static dexpress-serve-static-core mime –global –save 而错误是： C:\Users\user\Desktop\myApp>typings install node express body-parser serve-static dexpress-serve-static-core mime –global –save typings INFO globaldependencies "express" lists global dependencies on "node" that must be installed manually typings INFO globaldependencies "serve-static" lists global dependencies on "node" that must be installed manually typings […]

使用Express的React.js：在使用Express作为服务器时在客户端渲染一个简单的组件？

我是新来的ReactJS和Node.js，我肯定卡住了。 我的问题是，我不能在我的index.html文件中呈现我简单的React组件。 当我在terminal写webpack的时候，会输出一个bundle.js文件。 然后，当我启动使用npm start脚本的webpack-dev-server npm start ，它运行，我可以去localhost:3000 ，它输出： 输出的图像 。 这意味着它不会输出<div id="app"></div> 。 当我到localhost:3000/bundle/bundle.js它会在浏览器中输出bundle.js文件。 我也尝试在terminal中使用node app.js启动服务器，并启动服务器并在转到localhost:3000时呈现index.html文件，但不会加载bundle.js脚本，而是404。我尝试以多种方式编写src-attribute（../bundle/bundle.js等），但是我无法正常工作。 下面的文件夹结构 我希望它是可读的 root bundle bundle.js src App.jsx static index.html app.js package.json webpack.config.js 无论如何，我search了几个小时，我找不到任何解决scheme，所以我希望有人能帮助我。 我会在下面发布相关文件。 干杯! app.js var express = require('express'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var user = require('./models/userModel'); var app = express(); app.use(express.static('static')); var […]

npm只安装节点服务器？

这可能是一个非常绿色的问题，但我一直在使用webpackdevise一个反应的应用程序，并使用npm install安装各种软件包。 每个软件包都用于某些前端部件，比如制表符或者D3等等。我的问题是，这是否意味着我必须将服务器作为节点服务器？ 它可能是一个瓶服务器，或其他一些随机types，仍然使用这些节点包？ 我知道这似乎是一个愚蠢的问题，因为我使用节点，他们被称为节点模块，但他们都是前端而不是后端，所以我不知道他们是否需要一个节点返回结束与否。

React.semantic ui的Icones没有加载webpack中间件

我正在尝试使用React Semantic构build一个反应应用程序。 我正在使用webpack-dev-server，webpack-hot-middleware和webpack-dev-middleware来自动执行任务。 我通过npm安装了反应语义ui。 npm install –save semantic-ui-css semantic-ui-react 然而，webpack似乎不加载./node_modules/semantic-ui-css/themes/assets/fonts/图标，它不是html页面./node_modules/semantic-ui-css/themes/assets/fonts/ 。 在控制台中没有错误，它只是不显示图标。 如果我没有在反应应用程序中导入semantic-ui-css，并且包含在CDN中，它就可以正常工作。 App.js import React from 'react'; import 'semantic-ui-css/semantic.min.css'; import { Container, Icon } from 'semantic-ui-react'; class App extends React.Component{ render(){ return ( <Container fluid> <h1 id='test'>ReactJs</h1> <hr/> <Icon name='search' /> </Container> ) } } export default App; webpack.config.dev.js import path from 'path'; import […]

Webpack Angular 4开始的问题

我在我的Angular 4项目中遇到依赖问题。 这是package.json文件： { "name": "angular-webpack-starter", "version": "1.0.0", "description": "A webpack starter for Angular", "scripts": { "start": "webpack-dev-server –hot –inline –progress –port 8080 –open", "test": "karma start", "build": "rimraf dist && webpack –config config/webpack.prod.js –progress –profile –bail" }, "dependencies": { "@angular/animations": "^4.2.5", "@angular/common": "^4.2.5", "@angular/compiler": "^4.2.5", "@angular/compiler-cli": "^4.2.5", "@angular/core": "^4.2.5", "@angular/forms": "^4.2.5", "@angular/http": "^4.2.5", "@angular/platform-browser": […]

我如何添加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' } ] } };

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' }, […]

使用webpack-dev-server运行节点应用程序时设置环境variables？

在我的节点应用程序中，我试图区分开发版本的应用程序和生产版本。 当我运行webpack-dev-server时，我使用下面的命令： NODE_ENV =开发webpack-dev-server –inline –hot –content-base ./public 在我的应用程序中，我尝试使用process.env.NODE_ENV读取NODE_ENV中的内容，但似乎为空。 这是不是使用webpack-dev-server设置环境variables的正确方法？ 编辑：这是在我的React应用程序。 我使用Express来为生产中的应用程序提供服务，但是我只是使用webpack-dev-server来进行开发。

与Webpack的ReactJS：未捕获的ReferenceError：需求未定义

以下是我的webpack.config.js。 在浏览器开发工具中，获取“Uncaught ReferenceError：require is not defined” 如果我删除“目标”：“节点”，然后错误“未捕获TypeError：fs.​​readFileSync是不是一个函数”被抛出。 var config = { entry: './main.js', output: { filename: './index.js', }, devServer: { inline: true, port: 8080 }, node: { fs: "empty" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, target: 'node' } module.exports = […]