前端工程化开发的一个重要标志就是热替换技术，它大大的提高开发效率，使我们专注于写代码，webpack2中的热替换相比较1更加简洁。
1. 先看效果
2.目录结构
3.项目目录结构文件描述
bin 执行文件
node_modules node包
public 静态资源文件
- static 静态资源
- dist 编译后文件
src 项目js文件
.bablrc babel配置文件
webpack.config.dev.js开发模式webpack配置
webpack.config.pro.js生产模式webpack配置
3.技术依赖
- node
- react
- babel
- ES6/ES2015
- react-hmre
- webpack
babel-loader,css-loader,sass-loader,style-loader,webpack-hot-middleware,webpack-hot-middleware
热加载最重要的几个配置是packge.json/devserver.js/webpack.config.dev.js/webpack.config.prod.js/.babelrc
packge.json
scripts的几个命令
webpack.config.dev.js
devtool: 'cheap-module-eval-source-map',//打包构建信息
entry: [
'eventsource-polyfill',//for IE
'webpack-hot-middleware/client',//webpack服务连接到浏览器接收更新
'./src/index.js'],output: {
filename: 'boundle.js',publicPath: '/dist/js/'
},module: {
loaders: [{
test: /\.js$/,loaders: ['babel-loader'],exclude: /node_modules/ //哪些<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>下的需要用到babel
},{
test: /\.css$/,loaders: ['style-loader','<a href="https://www.jb51.cc/tag/css/" target="_blank" class="keywords">css-</a>loader'],},{
test: /\.scss$/,'<a href="https://www.jb51.cc/tag/css/" target="_blank" class="keywords">css-</a>loader','sass-loader'],{
test: /\.(png|jpg|gif)$/,loaders: ['url?limit=8192&name=images/[name].[ext]'],}
]},resolve:{
alias: {
css: path.resolve(__dirname,'public/static/css/'),//css目录别名
}},plugins: [
new webpack.HotModuleReplacementPlugin(),//热替换<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>
new webpack.NoEmitOnErrorsPlugin()]
};
.babelrc
"presets": ["react-hmre"]
}
}
}
devserver.js
var compiler = webpack(config);
var webpackDevMiddleware = require("webpack-dev-middleware");
app.use(webpackDevMiddleware(compiler,{
noInfo: false,//true将打印编译信息（建议false，true会打印很多信息）
publicPath: config.output.publicPath //绑定middleware
}));
var webpackHotMiddleware = require('webpack-hot-middleware');
app.use(webpackHotMiddleware(compiler));
app.get('*',function(req,res) {
res.sendFile(path.resolve(__dirname,'../index.html')); //
});
app.listen(3100,function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3100');
});
这样就可以实现热加载了，在项目根目录执行
webpack.config.prod.js
devtool: 'cheap-module-eval-source-map',entry: [
'./src/index.js'
],output: {
path: path.join(__dirname,'public/dist/js'),filename: 'boundle.js',exclude: /node_modules/
},resolve:{
alias: {
css: path.resolve(__dirname,img: path.resolve(__dirname,'public/static/img/'),}},plugins: [
new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin(),new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]};
生产的webpack主要完成开发后的编译打包，在plugins里多了压缩插件,在项目根目录执行
bin/server.js
生产环境启动文件
app.use(express.static(path.resolve(__dirname,'../public'),{ maxAge: oneYear }));
app.get('*','../index.html'));
});
app.listen(3200,function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3200');
});
