webpack devserver proxy 配置以及react多页面
阅读原文时间:2023年07月08日阅读:3

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