webpack 1.x构建react项目简单配置

这是我16年下半年开始接手的项目，当时刚学react和webpack相关的东西，这里稍微整理下。
直接上配置代码
这是开发配置

var path = require('path');var webpack = require('webpack');// var OpenBrowserPlugin = require('open-browser-webpack-plugin');var HtmlwebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包//定义了一些文件夹的路径var ROOT_PATH = path.resolve(__dirname);// var APP_PATH = path.resolve(ROOT_PATH, 'app/js');var APP_PATH = path.resolve(ROOT_PATH, 'app');var BUILD_PATH = path.resolve(ROOT_PATH, 'build');//Template的文件夹路径var TEM_PATH = path.resolve(ROOT_PATH, 'app/templates');module.exports = {  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字  entry: {    //入口文件    index: path.resolve(APP_PATH, 'index.js')    //添加要打包在commons里面的库    // vendors: ['jquery', 'react', 'react-dom' ]    // utils: ['./common/url', './common/formatDate']  },  //输出的文件名 合并以后的js会命名为bundle.js  output: {    path: BUILD_PATH,    //注意 我们修改了bundle.js 用一个数组[name]来代替，他会根据entry的入口文件名称生成多个js文件，这里就是(app.js,mobile.js和vendors.js)    //上hash这个参数生成Hash名称的script来防止缓存    filename: '[name].[chunk:5].js'  },  externals: {    'jquery': 'jQuery',    'react': 'React',    'react-dom': 'ReactDOM',    'antd': 'antd'  },  devtool: 'cheap-module-eval-source-map',  devServer: {    historyApiFallback: true,    hot: true,    inline: true,    colors: true,    port: 8888,    proxy: {      '/api/*': {          target: 'http://localhost:8080',          changeOrigin: true,          secure: false      }    }  },  resolve: {    extensions: ['', '.js', '.jsx', '.less', '.scss', '.css']//后缀名自动补全  },  module: {    loaders: [      {        test: /\.css$/,        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')      },      {        test: /\.(png|jpg)$/,        //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图        // loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'        loader: 'url?limit=8192&name=images/[name].[ext]'      },      {        test: /\.jsx?$/,        loader: 'babel-loader',        // include: APP_PATH,        exclude: /node_modules/,        query: {          plugins: [ ["import", { libraryName: "antd", style: "css" }] ],// `style: true` 会加载 less 文件           presets: ['es2015', 'react']        }      },      {        test: /\.less$/,        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')      }    ]  },  plugins: [    new ExtractTextPlugin('[name].css'),    //创建了两个HtmlWebpackPlugin的实例，生成两个页面    new HtmlwebpackPlugin({      title: 'demo',      template: path.resolve(TEM_PATH, 'index.html'),      filename: 'index.html',      //chunks这个参数告诉插件要引用entry里面的哪几个入口      chunks: ['index'],      //要把script插入到标签里      inject: 'body'    }),    //自动打开该页面    // new OpenBrowserPlugin({    //   url: 'http://127.0.0.1:8888'    // }),    new webpack.HotModuleReplacementPlugin()  ]};

这是生产配置

var path = require('path');var webpack = require('webpack');// var OpenBrowserPlugin = require('open-browser-webpack-plugin');var HtmlwebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css的插件//定义了一些文件夹的路径var ROOT_PATH = path.resolve(__dirname);// var APP_PATH = path.resolve(ROOT_PATH, 'app/js');var APP_PATH = path.resolve(ROOT_PATH, 'app');var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');//Template的文件夹路径var TEM_PATH = path.resolve(ROOT_PATH, 'app/templates');var config = module.exports = {  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字  entry: {    //入口文件    index: path.resolve(APP_PATH, 'index.js')    // mobile: path.resolve(APP_PATH, 'mobile.js'),    //添加要打包在commons里面的库    // vendors: ['jquery', 'react', 'react-dom' ]    // antd: ['antd']    // utils: ['./common/url', './common/formatDate']  },  //输出的文件名 合并以后的js会命名为bundle.js  output: {    path: BUILD_PATH,    //注意 我们修改了bundle.js 用一个数组[name]来代替，他会根据entry的入口文件名称生成多个js文件，这里就是(app.js,mobile.js和vendors.js)    //上hash这个参数生成Hash名称的script来防止缓存    filename: '[name].[chunkhash:6].js',  },  externals: {//剔除单独引入的第三方库    'antd': 'antd',    // 'react': 'React',    // 'react-dom': 'ReactDOM',    // 'jquery': 'jQuery'  },  devtool: 'source-map',  resolve: {    extensions: ['', '.js', '.jsx', '.less', '.scss', '.css']//后缀名自动补全  },  module: {    loaders: [      {        test: /\.css$/,        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')      },      {        test: /\.(png|jpg)$/,        //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图        loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'      },      {        test: /\.jsx?$/,        loader: 'babel-loader',        // include: APP_PATH,        exclude: /node_modules/,        query: {          presets: ['es2015', 'react'],          plugins: ['transform-runtime', ['import', {            libraryName: 'antd',            style: 'css'          }]]        }      },      {        test: /\.less$/,        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')      }    ]  },  plugins: [   //以下配置可以告诉 React 当前是生产环境，请最小化压缩 js ，即把开发环境中的一些提示、警告、判断通通去掉，直流以下发布之后可用的代码。    new webpack.DefinePlugin({        'process.env': {            NODE_ENV: JSON.stringify('production') //定义生产环境        }    }),    //把入口文件里面的数组打包成verdors.js    // new webpack.optimize.CommonsChunkPlugin('vendors','commons/vendors.js'),    // new webpack.optimize.CommonsChunkPlugin(    // {    //      names: ['vendors'],    //     // filenames: ['vendors.js', 'utils.js'],    //     filename: '/js/[name].[chunkhash:6].js',    //     minChunks: Infinity    // }),    new ExtractTextPlugin('[name].[chunkhash:6].css'),    //创建了两个HtmlWebpackPlugin的实例，生成两个页面    new HtmlwebpackPlugin({       title: 'title',       template: path.resolve(TEM_PATH, 'index.html'),       filename: 'dist/tggl.html',       //chunks这个参数告诉插件要引用entry里面的哪几个入口       // chunks: ['posterManage', 'vendors'],       chunks: ['extendManage'],       //要把script插入到标签里       inject: 'body'    }),    //压缩css    new OptimizeCssAssetsPlugin({      assetNameRegExp: /\.optimize\.css$/g,      cssProcessor: require('cssnano'),      cssProcessorOptions: { discardComments: {removeAll: true } },      canPrint: true    }),    //这个使用uglifyJs压缩你的js代码    new webpack.optimize.UglifyJsPlugin({      output: {        comments: false, // 去掉所有注释      },      compress: {//去掉警告和打印之类的        warnings: false,        drop_debugger: true,        drop_console: true      }    })  ]};