zoukankan      html  css  js  c++  java
  • webpack devserver proxy 配置以及react多页面

    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 })
  • 相关阅读:
    HDU 5963 朋友
    BZOJ 4805 欧拉函数求和
    BZOJ 2153 设计铁路
    BZOJ 2631 tree
    BZOJ 4804 欧拉心算
    BZOJ 4806 炮
    BZOJ 3774 最优选择
    BZOJ 4800 Ice Hockey World Championship
    BZOJ 3894 文理分科
    北方大学多校联合训练第十一场E:Modules
  • 原文地址:https://www.cnblogs.com/yangstar90/p/9455234.html
Copyright © 2011-2022 走看看