目标：
- 基于webpack支持react多页面构建（不用gulp，gulp-webpack 构建速度太慢[3]), generator-react-webpack 对单页面支持很好，但对多页面，需要改造
- 提高开发人员的效率
- 并能对项目进行足够的性能优化
- 提高构建的效率
配置文件编写（webpack.config.js）
示例：
var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var node_dir = path.join(__dirname, './node_modules/');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 获取所有入口文件
var getEntry = function(globPath) {
var entries = {
vendor: ['jquery','react','react-dom','./src/app'] // 类库
};
glob.sync(globPath).forEach(function(entry) {
var pathname = entry.split('/').splice(-2).join('/').split('.')[0];
entries[pathname] = [entry];
});
console.log(entries);
return entries;
};
// 判断是否是在当前生产环境
var isProduction = process.env.NODE_ENV === 'production';
var entries = getEntry('./src/view/*/*.jsx');
var chunks = Object.keys(entries);
module.exports = {
entry: entries,
output: {
path: path.join(__dirname, './dist'),
filename: isProduction ?'js/[name].[hash:8].js':'js/[name].js',
publicPath: '/dist/',
chunkFilename: 'chunk/[name].chunk.js'
},
module: {
noParse:[
/*path.join(node_dir,'./react/dist/react.min.js'),
path.join(node_dir,'./jquery/dist/jquery.min.js'),
path.join(node_dir,'./react-dom/dist/react-dom.min.js')*/
],
loaders: [{
test: /.jsx?$/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
},
exclude: node_dir
}, {
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
}, {
test: /.less$/,
loader: ExtractTextPlugin.extract('style', 'css!less')
}, {
test: /.(png|jpe?g|gif)$/,
loader: 'url?limit=8192&name=img/[hash:8].[ext]'
}, {
//文件加载器，处理文件静态资源
test: /.(woff|woff2|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
loader: 'file?limit=10000&name=fonts/[hash:8].[ext]'
}]
},
resolve: {
extensions: ['',