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 })