github地址: https://github.com/yangstar/React-antd-webpack-dev-server
var webpack = require('webpack');
var path = require('path');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var glob = require('glob')
//路径定义
var srcDir = path.resolve(process.cwd(), 'react/entries');
var distDir = path.resolve(process.cwd(), 'build');
var htmlDir = path.resolve(process.cwd(), './');
var nodeModPath = path.resolve(__dirname, './node_modules');
var publicPath = '';
//插件定义
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
//入口文件定义
var entries = function () {
// var jsDir = path.resolve(srcDir, 'js')
var entryFiles = glob.sync(srcDir + '/*.{js,jsx}')
var map = {};
for (var i = 0; i < entryFiles.length; i++) {
var filePath = entryFiles[i];
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
map[filename] = filePath;
}return map;
}
//html_webpack_plugins 定义
var html_plugins = function () {
var entryHtml = glob.sync(htmlDir + '/*.html')
var r = []
var entriesFiles = entries()
for (var i = 0; i < entryHtml.length; i++) {
var filePath = entryHtml[i];
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
// console.log(entryHtml[i], filename)
var conf = {
template: 'html!' + filePath,
filename: filename + '.html'
}
//如果和入口js文件同名
if (filename in entriesFiles) {
conf.inject = 'body'
conf.chunks = ['vendor', filename]
}
//跨页面引用，如pageA,pageB 共同引用了common-a-b.js，那么可以在这单独处理
//if(pageA|pageB.test(filename)) conf.chunks.splice(1,0,'common-a-b')
r.push(new HtmlWebpackPlugin(conf))
}
return r
}
var webpack_config = function (options) {
options = options || {}
var debug = options.debug !== undefined ? options.debug : true;
var plugins = [];
var extractCSS;
var cssLoader;
var sassLoader;
plugins.push(new CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}));
if (debug) {
extractCSS = new ExtractTextPlugin('css/[name].css?[contenthash]')
cssLoader = extractCSS.extract(['css'])
sassLoader = extractCSS.extract(['css', 'sass'])
plugins.push(extractCSS)
} else {
extractCSS = new ExtractTextPlugin('css/[contenthash:8].[name].min.css', {
// 当allChunks指定为false时，css loader必须指定怎么处理
allChunks: false
})
cssLoader = extractCSS.extract(['css?minimize'])
sassLoader = extractCSS.extract(['css?minimize', 'sass'])
plugins.push(
extractCSS,
new UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
mangle: {
except: ['$', 'exports', 'require', 'avalon']
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.NoErrorsPlugin()
)
}
//config
var config = {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
port: 8000,
header: { "Access-Control-Allow-Origin": "*" },
contentBase: './', //index.html所在目录
proxy: {
'/': {
target: 'http://10.10.11.100:8081',
changeOrigin: true,
secure: false
}
}
},
entry: Object.assign(entries(), {
// 用到什么公共lib（例如jquery.js），就把它加进vendor去，目的是将公用库单独提取打包
'vendor': ['react', 'react-dom']
}),
output: {
path: path.join(__dirname, "/build"),
filename: "[name].js",
chunkFilename: '[id].bundle.js',
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js[x]?$/,
include: path.resolve(__dirname, 'react'),
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader?cacheDirectory'],
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}, {
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'url'
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.scss', '.tpl', '.png', '.jpg'],
root: [srcDir, nodeModPath],
publicPath: '/',
alias: {
InnerForm: __dirname + 'xx.js',
}
},
plugins: plugins.concat(html_plugins(),
new webpack.NoErrorsPlugin(),
new OpenBrowserPlugin({
url: 'http://localhost:8081/dev/index.html'
})
)
}
return config;
}
module.exports = webpack_config({ debug: true })
