react-redux-boilerplate-scripts/config/webpack.config.dev.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 paths = require(util.pathResolve('config/paths.js',__dirname,'react-redux-app-scripts'));

//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信息获取
const entry =  [
  'react-hot-loader/patch',
  'webpack-dev-server/client',//热替换入口文件
  // bundle the client for hot reloading
  // only- means to only hot reload for successful updates
  'webpack/hot/only-dev-server',
  paths.appEntry,
];
//webpack配置项
var config = {
  devtool: "cheap-module-source-map",
  //隐藏终端的warning信息
  performance: { 
    hints: false, 
  },
  entry: {
    app: entry,
  }, 
  output: {
    filename: 'bundle.js?hash=[hash]',
    //js打包输出目录，以package.json为准，是用相对路径
    path: paths.appBuild,
    //内存和打包静态文件输出目录，以index.html为准,使用绝对路径，最好以斜杠/结尾，要不有意想不到的bug
    publicPath: '/',
    //定义require.ensure文件名
		chunkFilename: '[name]-[id]-[chunkHash].chunk.js',
    libraryTarget: "var",
    sourceMapFilename: "[file].map"
  },
  module: {
    rules: [
      //匹配到rquire中以.css结尾的文件则直接使用指定loader
      { 
        test: /\.css$/, 
        use: ["style-loader","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({
      PREFIX_URL: "test",
      inject: true,
      template: paths.appHtml,
    }),
    new webpack.DefinePlugin({
      'PREFIX_URL': JSON.stringify(""), 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 
      'process.env.useImmutable': JSON.stringify(useImmutable), 
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
};
//使用sass配置
if(useSass) {
  config.module.rules.push(
    { 
      test: /\.scss$/, 
      loader: ["style-loader","css-loader","sass-loader"] 
    }
  );
}

module.exports = config;