webpack 1.x構建react項目簡單配置__web

這是我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      }    })  ]};