问候一个,所有,
我一直在玩Webpack的Bootstrap,但我正在把我的头发撕掉.我从字面上通过博客文章的负荷了,他们要么使用7个月过时"自举的WebPack"插件(其中,令人惊讶的不开箱的)或.它们包括引导文件通过进口"node_modules/*/自举/ CSS/bootstrap.css'.
当然,必须有一种更清洁,更有效的方法来解决这个问题吗?
这是我目前的webpack.config.js档案:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/js/main.js')
},
module: {
loaders: [{
test: /\.js[x]?$/,
loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'postcss', 'sass']
}, {
test: /\.sass$/,
loader: 'style!css!sass?sourceMap'
},{
test: /\.less$/,
loaders: ['style', 'css', 'less']
}, {
test: /\.woff$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
}, {
test: …Run Code Online (Sandbox Code Playgroud) 各位开发者!
感谢Egghead的教程,我一直在深入研究Flux/React.虽然我听说React正在移动,但是在遵循上述教程的同时,我在React库中遇到了一些变化.
到目前为止,我已经能够解决所有问题.现在,我遇到了关于商店的砖墙.正如教程所述,我正在制作一个购物车,用户可以在其中添加商品.没那么复杂.实际添加有效,但不会触发重新渲染.以下代码给出了添加的错误(完整代码也将在下面列出):
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
Run Code Online (Sandbox Code Playgroud)
这导致Uncaught TypeError:listener必须是一个函数.回调参数未定义(因此问题出在哪里).但是,因为我不仅仅是新的React的工作方式,我在查找问题方面遇到了麻烦.以下代码段是教程中的Store:
var AppStore = assign(EventEmitter.prototype, {
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeChangeListener(CHANGE_EVENT, callback);
},
getCart: function() {
return _cartItems;
},
getCatalog: function() {
return _catalog;
},
getCartTotals: function() {
return _cartTotals();
},
dispatcherIndex: AppDispatcher.register(function (payload) {
var action = payload.action;
switch(action.actionType) {
case AppConstants.ADD_ITEM:
_addItem(payload.action.item);
break;
case AppConstants.REMOVE_ITEM:
_removeItem(payload.action.index);
break;
case AppConstants.INCREASE_ITEM:
_increaseItem(payload.action.index);
break;
case AppConstants.DECREASE_ITEM:
_decreaseItem(payload.action.index);
break;
} …Run Code Online (Sandbox Code Playgroud) 问候一个,所有,
在做了React应用程序后,我决定深入研究Webpack.我是整个npm自动化领域的新人,在阅读了一本食谱和各种教程后,我不能让npm run dev我的应用程序捆绑.它在我运行时生成了一个完全正常的bundle.js webpack,但吸引我的是每当我改变某些东西时webpack都会生成一个物理文件.Gulp和Grunt可以为我做这件事,但我也想让它与webpack一起工作.
所以,不用多说,一些代码.我运行的npm run dev是这样定义的(package.json只是脚本部分*):
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
Run Code Online (Sandbox Code Playgroud)
使用以下Webpack配置:
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '/js/bundle.js',
publicPath: '/'
},
devServer: {
inline: true,
contentBase: './dist'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
] …Run Code Online (Sandbox Code Playgroud)