需求描述:最近基于React、Webpack构建一个模块化的常见插件库。
感兴趣的可以参考一下,https://github.com/coocssweb/react-plug
第一次做开源,最近比较不忙,所以每天晚上都会写一些新的组件,欢迎各位大牛指点。
现在遇到的问题是,为了方便调试,在webpack.config.js中做了可调式的配置。
那么问题来了,因为在entry中已经做了可调式配置,那么如何在这个配置的基础上配置多个入口文件呢?
下面是我的webpack.config.js配置信息。
/**
* webpack 配置文件
* 配置独立项、入口文件、输出项信息
*/
var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var components_dir = path.join(__dirname, 'components');
var examples_dir = path.join(__dirname,'examples');
//独立项
var deps = [
'react/dist/react.min.js',
'jquery/dist/jquery.min.js',
'underscore/underscore-min.js'
];
var alias=[
'SlideDelete/SlideDelete.js'
];
//入口文件
var entrys = ['Tip/Tip.js'];
var config = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:3000',
'webpack/hot/only-dev-server'
],
output: {
path: path.join(__dirname, 'public/dist/'),
filename: 'Tip.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
alias: []
},
module: {
noParse : [],
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
}]
}
}
//加载 alias项
deps.forEach(function (dep) {
var depPath = path.resolve(node_modules_dir, dep);
config.module.noParse.push(depPath);
});
//加载入口文件
entrys.forEach(function(entry){
var entryPath = path.resolve(examples_dir, entry);
config.entry.push(entryPath);
});
module.exports = config;