前几天去看了一下新闻说webpack现在很火 而近期又想搞搞react 然后就是各种的百度,结果发现并没有太多有价值的 看来还得上google.尤其是在这个过程中安装webpack-dev-server出现了大问题说vcbuild未找到等等,原来是因为没有安装vs 后来就升级了win10+vs2013 允许妥妥的.
首先需要安装一下
npm install webpack webpack-dev-server react-hot-loader --save
这是我的测试的项目结构
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack-dev-server/client?http://127.0.0.1:3000',//这是你服务器的ip和端口 保持和server.js一样端口和ip
'webpack/hot/only-dev-server',//这里不建议选择webpack/hot/dev-server
'./app/main'//入口
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/build/'//这里和server.js config.output.publicPath 对应是服务端产出路径
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//添加部分插件
new webpack.NoErrorsPlugin()//可选,但建议添加上NoErrorsPlugin()遇到语法错误时会暂停。修复该错误会自动恢复
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],//这里我使用的是babel 因为有ES6 也可以使用jsx-loader 都可以
include: path.join(__dirname, 'app')
}]
}
};
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
noInfo: false,
historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
大体的配置就好了 启动node server.js
输入http://localhost:3000/ 就可以看到效果了