02:36:54 UTC
大家可以看看图中的错误，是不是webpack的配置写错了
03:18:45 UTC
语法错误，不能这样写。
03:40:53 UTC
jsx不就是这样写的么？不这样写怎么写呢？
03:41:27 UTC
目前的情况是编译会报错，但页面在浏览器里能正确显示
03:50:40 UTC
你的 webpack 配置文件？
04:05:59 UTC
var path = require("path")
var _ = require("underscore")
var webpack = require("webpack")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
function extsToRegExp(exts) {
return new RegExp("\\.(" + exts.map(function(ext) {
return ext.replace(/\./g, "\\.")
}).join("|") + ")(\\?.*)?$")
function loadersByExtension(obj) {
var loaders = []
Object.keys(obj).forEach(function(key) {
var exts = key.split("|")
var value = obj[key]
var entry = {
extensions: exts,
test: extsToRegExp(exts)
if(Array.isArray(value)) {
entry.loaders = value
} else if(typeof value === "string") {
entry.loader = value
Object.keys(value).forEach(function(valueKey) {
entry[valueKey] = value[valueKey]
loaders.push(entry)
return loaders
module.exports = function(options) {
var minimize = options.minimize || process.argv.indexOf('--min') & 0
var entry = options.entry
var output = {
path: options.path || "./",
filename: options.filename || "js/[name].js",
//chunkFilename: (options.devServer ? "[id].js" : "[name].js") + (options.longTermCaching ? "?[chunkhash]" : ""),
sourceMapFilename: "js/[file].map",
pathinfo: options.debug,
library: options.library,
libraryTarget: options.libraryTarget || "umd"
// loaders ===========================================================================
var cssLoader = minimize ? "css-loader?localIdentName=[hash:base64:8]" : "css-loader?localIdentName=[path][name]---[local]---[hash:base64:5]",
lessLoader = cssLoader + '!less-loader'
var loaders = loadersByExtension({
"jsx": options.hotComponents ? ["react-hot-loader", "babel-loader?stage=0"] : "babel-loader?stage=0",
"js": "babel-loader?stage=0", // include: path.join(__dirname, "app")
"json": "file-loader?name=./json/[name].json",
//"txt": "raw-loader",
"png|jpg|jpeg|gif|svg": "url-loader?limit=10000&name=./images/[name].[ext]",
"ttf|eot|woff|woff2|otf|svg": "file-loader?name=./font/[name].[ext]",
//"wav|mp3": "file-loader",
//"html": "html-loader",
//"md|markdown": ["html-loader", "markdown-loader"]
"css": options.separateStylesheet ? ExtractTextPlugin.extract("style-loader", cssLoader, { publicPath: '.' }) : "style-loader!" + cssLoader,
"less": options.separateStylesheet ? ExtractTextPlugin.extract("style-loader", lessLoader, { publicPath: '.' }) : "style-loader!" + lessLoader
loaders.push({ test: /(\.js|\.jsx)$/, loader: 'eslint-loader', exclude: /(node_modules|\.css$|\.less$)/ })
// externals ========================================================================
var externals = []
_.mapObject({"react":"React", "reflux":"Reflux", "react-router":"ReactRouter"}, function (val, key) {
var ext = {}
ext[key] = {root:val,commonjs2:key,commonjs:key,amd:key}
externals.push(ext)
// plugins ==========================================================================
var plugins = [
new webpack.PrefetchPlugin("react"),
new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment")
if(options.separateStylesheet) {
plugins.push(new ExtractTextPlugin("css/[name].css"))
if(minimize) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
new webpack.optimize.DedupePlugin()
plugins.push(
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
new webpack.NoErrorsPlugin()
entry: entry,
output: output,
target: options.target || "web",
loaders: loaders
devtool: options.devtool,
debug: options.debug,
externals: externals,
plugins: plugins,
devServer: {
cached: false,
exclude: [
/node_modules[\\\/]react(-router)?[\\\/]/,
/node_modules[\\\/]items-store[\\\/]/
05:44:52 UTC
有if没else，所以错了
05:47:03 UTC
不太可能吧，错误可是在42行，说的是&这个符号。
05:49:41 UTC
噢！那就加个括号
loginButton = ( &Loading /& )
05:52:14 UTC
不对，还是一样。
14:20:06 UTC
前後補上 &div&&Loading /&&/div& 測試看看
01:39:08 UTC
貌似这个make-webpack-config.js 是我写的……不是语法和配置的问题，应该是有 loader 没install
02:42:07 UTC
是从github/react-ui中贴过来的，我试过把reactui的node_modules下的所有包弄过去也不行。但编译reactui那个项目就没有任何问题，所以很无语。唯一不同的就是我的文件是.react.jsx，但我也改成.jsx试过同样不行。不影响打包的结果，但影响心情，无语
02:29:13 UTC
这个模块不要最新的，最新的用webpack编译react会报那个错误，也是刚刚发现的，还不清楚怎么改，所以暂时解决问题请用我截图的那个版本。
04:30:38 UTC
babel升级到6.0以上的问题，我改成这样就可以了
module.exports = {
devtool: '#inline-source-map',
login: './blog/frontend/login',
404: './blog/frontend/404'
path: path.join(__dirname, '/blog/dist'),
filename: '[name].js',
publicPath: './blog/frontend'
loaders: [{
test: /\.js$/,
loader: 'babel',
presets: ['es2015','react'],
cacheDirectory: true,
plugins: ['syntax-object-rest-spread']
exclude: /node_modules/,
include: path.join(__dirname,'/blog/frontend')
test: /\.scss$/,
loaders: ['style!css!sass!']
10:32:59 UTC
babel升级拆分了模块
。你需要 npm install babel-loader babel-core babel-preset-es2015 babel-preset-react —save-dev然后 loader: "babel?presets[]=react,presets[]=es2015"解决 Webpack —watch 导致电脑内存占用过高的问题-前端江湖-微转化
分享前端开发技术和工具,发现优秀前端作品.
保利俱乐部被查封背后的故事（上）
[广告]●●●●●●●●●●●
热门公众号Accounts
精彩内容热门推荐
传递有价值的信息!
网罗全球最震惊的人和事!各种神秘短片;只为震惊你!!
点击&&&&&【关注】.小美每天为你带来最搞笑的内涵段子,精彩视频,爆笑美图,每天都意想不到,未满18岁禁止关注!
tldianying
通辽本地生活资讯
创意、摄影、美图、奇人异事、鸡汤、时尚、男神女神、星座鈥︹EURδ阆不兜?我都有!每天一场?视觉?盛宴,新的世界就此展开~
传播?主流?声音
datangleiyin
好好说话,有口德,留耳德.
QJIWE888888
品牌活动分享,时尚信息分享
参与、沟通、记录时代.
苏州菲博特环保科技有限公司是集核心科技产品的设计、研发、销售为一体的综合型高新技术企业.公司旗下?Life?环保科技品牌,以生活用品,日常用品,空气生态净化灯、高磁活化净水器等科技产品为载体,秉承“实用高端...
人民网安徽频道由人民网、人民日报社安徽分社主办,以&关注安徽、宣传安徽、服务百姓&为己任,致力于打造安徽省最具权威性和影响力的网络新闻媒体.
wei-rongxian
微容县时代,为容县商家提供微平台服务~
解决 Webpack —watch 导致电脑内存占用过高的问题
阅读&54379&发表& 21:18:48
这里介绍一种使用 gulp-webpack 来做即时 webpack 构建的方法.相比 webpack –watch 这种方法的好处是使用更少的内存.使用 webpack 作为构建工具在开发阶段我会使用 webpack –watch 来做即时构建. 但是这个 –watch 会导致node一直占用着内存，更糟糕的是随着构建次数增加而不断增加。在我的电脑上 webpack –watch 启动消耗了100M以上的内存, 随着构建次数的增加占用的内存越来越多直至电脑卡死。9次构建以后:在网上搜寻一番之后我决定使用 gulp 来 watch 文件的变化，然后使用 gulp-webpack 这个插件来运行 webpack 命令. 测试发现效果非常的好，gulp 来 watch 的话内存不会随着构建次数的增加而增加.gulp-webpack 插件的使用也非常方便.直接将 webpack.config.js 文件的配置导入就可以了.gulp.task('webpack', function(){
return gulp.src('./js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('./dist'));
评论Comments
微信公众号webpack按照官网的方法安装后运行报错： 不是内部或外部 - 跟谁学
搜索你想学的科目、老师试试，例如“英语”搜索吉安
&&webpack按照官网的方法安装后运行报错： 不是内部或外部安装步骤： $ npm install webpack -g
$ npm init
$ npm install webpack --save-dev 项目的node_modules里有webpack了，但运行报错，package.json文件没问题，在之前的电脑运行正常，今天换了电脑，安装就不行了。是怎么回事呢？shirleyshirley
解决方法：将webpack.cmd的目录，我的为C:UsersAdministratorAppDataRoamingnpm ，加入到环境变量PATH中。
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心webpack的安装和配置问题... - 跟谁学
搜索你想学的科目、老师试试，例如“书法”搜索吉安
&&webpack的安装和配置问题...看了一些傻瓜式教程. 想配置着一个看看效果... 之前没玩过 grunt.之类的库.. 额 是这样的.. 安装过程是这样的. npm install -g webpack 全局安装了webpack 文件目录是这样的:
package.json
webpack.config.js
再运行了 `npm init` 然后运行了 npm install html-webpack-plugin --save-dev 看到一些题目里说要在项目目录也要安装一遍webpack, 目录变成了 /app
package.json
webpack.config.js
/node_modules
/html-webpack-plugin
webpack.bat 这样我在项目根目录运行时 输入webpack 会出现Output filename not configured. 觉得可能是路径问题 配置文件是这样的:
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
entry: APP_PATH,
path: BUILD_PATH,
filename: 'bundle.js'
new HtmlwebpackPlugin({
title: 'Hello World app'
}; 我找了一下__dirname指的是文件当前运行的目录...我就把app文件和package.json和webpack.config.js文件全部丢到.bin文件里面了... 这个样子.里面确实会建立一个bulid文件夹,而且bundle.js也会被建立..但是好像HtmlwebpackPlugin这个插件没起作用(里面没有html的文件).... 不知道哪里做错了... 没用过NODEJS.. 大神们请赐教QAQ猫舌丶阿私阿司翼andyyu0920
...目前一看可能是打錯字 plugin -& plugins
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心使用webpack编写React时,用ajax获取数据时遇到问题 - CNode技术社区
在前端默默耕耘，但不会止步于前端，而是努力成为大前端
项目入口文件的代码如下
1 import React from 'react';
2 import CommentBox from './Components/CommentBox';
5 function main(){
React.render(
&CommentBox url=&./comments.json& pollInterval={2000} /&,
document.getElementById('app')
12 main();
CommentBox的代码如下
import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import $ from 'jquery/src/core';
export default class CommentBox ponent{
loadCommentsFromServer(){
url: this.props.url,
dataType: 'json',
success: function(data){
this.setState({data: data});
}.bind(this),
error: function(err){
console.err(this.props.url,status,err.toString())
}.bind(this)
getInitialState(){
return {data: []};
componentDidMount(){
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer,this.props.pollInterval);
&div className=&commentBox&&
&h1&Comments&/h1&
&CommentList data={this.state.data} /&
&CommentForm /&
&/div&
CommentList的代码如下
import React from 'react';
import Comment from './Comment';
export default class CommentList ponent{
var commentNodes = this.props.data.map(function(comment){
&Comment author={comment.author}&
{comment.text}
&/Comment&
&div className=&commentList&&
{commentNodes}
&/div&
Comment的代码如下
import React from 'react';
import Showdown from 'showdown';
var converter = new Showdown.Converter();
export default class Comment ponent{
&div className=&comment&&
&h2 className=&commentAuthor&&
{this.props.author}
&/h2&
{converter.makeHtml(this.props.children.toString())}
&/div&
在浏览器访问的时候却得到如下的结果
Uncaught TypeError: Cannot read property ‘data’ of null * *
是我的请求路径有问题还是代码哪里写错了！求大神解答
用没用 webpack-dev-server
对data加一个非空判断吧
if(data && data.length) {
// something code …
猜测是数据没有过来的时候就对其迭代，所以map报错~
使用ES6语法时候，react不会给你自动绑定this。getInitialState会失效。
使用ES6的时候，应该使用constructor：
constructor(props) {
super(props);
this.state = {data: []};
这样子吗，那我改一下看看！
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的