react-admin-lte/webpack/Make.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

const path               = require('path');
const ExtractTextPlugin  = require("extract-text-webpack-plugin");
const webpack            = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const HtmlWebpackPlugin  = require('html-webpack-plugin');

const nodeModulesPath = path.resolve(__dirname, 'node_modules');


class Make {

  constructor(options) {
    options = options || {};
    /**
     * 是否开发模式
     * @type {*|boolean}
     */
    this.devMode = options.devMode;

    /**
     * 开发目录，这是一个绝对路径。
     */
    this.devPath = options.devPath || path.resolve('./dev');
    /**
     * 需要构建到的目录。
     */
    this.buildPath = options.buildPath || path.resolve('./build');
    /**
     * 目录名称，这是相对于 devPath 的。
     * @type {string}
     */
    this.resFolder = options.resFolder || 'res';
    // this.layoutPath = options.layoutPath || path.join(this.devPath, 'layout.html');
    /**
     * 环境
     * @type {null|string}
     */
    this.nodeEnv = options.nodeEnv || 'dev';

    this.venderLibs = options.venderLibs || [];

    this.libAlias = options.libAlias || {};

  }


  createWebpackConfig() {
    var config = {
      context: this.devPath,
      entry  : {
        index: './index.js'
      },
      output : {
        path    : this.buildPath,
        filename: this.devMode ? '[name].js' : 'js/[chunkhash:8].[name].min.js',
        chunkFilename: this.devMode ? '[chunkhash:8].chunk.js' : 'js/[chunkhash:8].chunk.min.js',
        hotUpdateChunkFilename: this.devMode ? '[id].js' : 'js/[id].[chunkhash:8].min.js',
        publicPath: '/'
      },
      devtool: "#source-map",
      resolve: {
        root      : [this.devPath, nodeModulesPath],
        alias     : this.libAlias,
        extensions: ['', '.js', '.css', '.png', '.jpg']
      },
      module : {
        loaders: [
          {
            test   : /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
            loaders: [
              'url?limit=50000&name=img/[name].[ext]',
              'image?{bypassOnDebug:true, progressive:true,optimizationLevel:3,pngquant:{quality:"65-80",speed:4}}'
            ]
          },
          {
            test  : /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
            loader: 'url?limit=10000&name=fonts/[name].[ext]'
          },
          {
            test  : /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
          },
          {
            test   : /\.js$/, // All .js files
            loaders: this.devMode? ['babel-loader']:['babel-loader'], 
            exclude: [nodeModulesPath]
          }
        ]
      },
      resolveLoader:{
        root: path.join(__dirname, 'node_modules')
      },
      plugins: [
        new CommonsChunkPlugin({
          children: true,
          filename: "common.js",
          name    : "common"
        }),
        new HtmlWebpackPlugin({
          template: 'layout.html'
        }),
        new webpack.DefinePlugin({
          "process.env": {
            NODE_ENV: JSON.stringify(this.nodeEnv)
          }
        }),
        new ExtractTextPlugin('css/[name].min.css', {
          allChunks: false
        })
      ]
    };

    if (!this.devMode) {
      config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.NoErrorsPlugin()
      );
    } else {
      config.entry['HMR'] = "webpack-hot-middleware/client?reload=true";

      config.plugins.push(
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      );
    }
    return config;
  }


}


module.exports = Make;