react-redux-boilerplate-scripts/config/webpack.config.prod.js

react-boilerplate-app-scripts

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const fs = require('fs-extra');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const util = require('react-boilerplate-app-utils');
const scriptsPackagename = 'react-boilerplate-app-scripts';
const paths = require(util.pathResolve('config/paths.js',__dirname,scriptsPackagename));

//bebin-----------packageJson信息获取
const packageJson = util.getCwdPackageJson();
function getInfo(package){
  return !!(
    packageJson.dependencies && packageJson.dependencies[package] 
    || packageJson.devDependencies && packageJson.devDependencies[package]
  );  
}
const useSass = getInfo("sass-loader") && getInfo("node-sass");
const useImmutable = getInfo("immutable") && getInfo("redux-immutable");
//end  -----------packageJson信息获取

//webpack配置项
var config = {
  //任何错误立即终止 
  bail: true,
  devtool: "source-map",
  //隐藏终端的warning信息
  performance: { 
    hints: false, 
  },
  entry: {
    app: paths.appEntry,
  }, 
  output: {
    filename: 'static/js/bundle.js?hash=[hash]',
    //js打包输出目录，以package.json为准，是用相对路径
    path: paths.appBuild,
    //内存和打包静态文件输出目录，以index.html为准,最好以斜杠/结尾，要不有意想不到的bug
    publicPath: '/',
    //定义require.ensure文件名
		chunkFilename: 'static/js/[name]-[id]-[chunkHash].chunk.js',
    libraryTarget: "var",
    sourceMapFilename: "[file].map"
  },
  module: {
    rules: [
      //匹配到rquire中以.css结尾的文件则直接使用指定loader
      { 
        test: /\.css$/, 
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader",
        })
      },
      //limit是base64转换最大限制，小于设置值，都会转为base64格式
      //name是在css中提取图片的命名方式
      { 
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.json$/
        ],
        //[path]是以publicPath为准
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: "/static/media/[name].[hash].[ext]"
        }
      },
      { 
        //匹配.js或.jsx后缀名的文件
        test: /\.js[x]?$/, 
        loader: 'babel-loader',
        include: paths.src
      },
    ],
  },
  externals: {
  },
  resolve: {
    alias: {
      "src": paths.src, 
    }, 
    //不可留空字符串
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.DefinePlugin({
      'PREFIX_URL': JSON.stringify(""), 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 
      'process.env.useImmutable': JSON.stringify(useImmutable), 
    }),
    // This helps ensure the builds are consistent if source hasn't changed:
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.LoaderOptionsPlugin({
      // optionally pass test, include and exclude, default affects all loaders
      test: /\.css|.js|.jsx|.scss$/, 
      minimize: true,
      debug: false,
    }),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new ExtractTextPlugin({
      filename: 'static/css/styles.css?hash=[hash]',
      //最好true,要不后面加上sass-loader等时，会出现css没有提取的现象
      allChunks: true 
    })
  ]
};
//使用sass配置
if(useSass) {
  config.module.rules.push(
    { 
      test: /\.scss$/, 
      loader: ExtractTextPlugin.extract({
        fallback: "style-loader",
        loader: ["css-loader","sass-loader"],
      })
    }
  );
}

module.exports = config;