Webpack 1.x build react Project simple configuration __web

This is the project I began to take over in the second half of 16, when I just learned react and webpack related things, here a little bit.
Configure code directly
This is the development configuration

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 is individually packaged//defined with some folder path 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 Folder path var Tem_path = Path.resolve (Root_path, ' app/templates ');  Module.exports = {//The folder of the project can be found directly by default to the folder name Index.js can also determine which file name entry: {//Portal file Index:path.resolve (App_path, ' Index.js '///Add the library//vendors to be packaged in commons: [' jquery ', ' react ', ' react-dom ']//Utils: ['./common/url ', './C Ommon/formatdate ']},//Output filename merged later JS will be named Bundle.js output: {Path:build_path,/note we have modified bundle.js with an array [NA Me] Instead, he will generate multiple JS files based on the entry's entry file name, which is the scrip of the hash name (App.js,mobile.js and Vendors.js)//hash.T to prevent cache 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, Inli
          Ne:true, Colors:true, port:8888, proxy: {'/api/* ': {target: ' http://localhost:8080 ', Changeorigin:true, Secure:false}}}, resolve: {extensions: [', '. js ', '. Jsx ', '. Le SS ', '. Scss ', '. css ']//suffix name auto-complement}, module: {loaders: [{test:/\.css$/, Loader:extracttext Plugin.extract (' Style-loader ', ' Css-loader ')}, {test:/\. ( png|jpg) $/,//Note the parameters of the limit at the back, when your picture size is less than this limit, automatically enable Base64 code map//loader: ' Url?limit=8192&name=images/[ha Sh: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 ' will load less file presets: [' es2015 ', ' React ']}},
    {test:/\.less$/, Loader:ExtractTextPlugin.extract (' Style-loader ', ' Css-loader!less-loader ')} ]}, plugins: [New Extracttextplugin (' [name].css '),//Create two Htmlwebpackplugin instances, generate two page new HTMLWEBPACKPL Ugin ({title: ' Demo ', Template:path.resolve (Tem_path, ' index.html '), FileName: ' index.html ',//ch
    Unks This parameter tells the plug-in to refer to the entry inside the entry chunks: [' index '],///To insert the script into the label inject: ' Body '},//Automatically open the page New Openbrowserplugin ({//URL: ' http://127.0.0.1:8888 '//}), new Webpack. Hotmodulereplacementplugin ()]};

This is a production configuration

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 individually packaged var optimizecssassetsplugin = require (' Optimize-css-assets-webpack-plugin ');
Compressed CSS plugins//defines the path of some folders 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 Folder path var Tem_path = Path.resolve (Root_path, ' app/templates '); var config = Module.exports = {//The folder of the project can be found directly by default to the folder name Index.js can also determine which file name entry: {//Entry file Index:path.reso Lve (App_path, ' index.js ')//Mobile:path.resolve (App_path, ' mobile.js '),//Add library//commons to be packaged in vendors: [' JQ Uery ', ' react ', ' react-dom ']//ANTD: [' antd ']//Utils: ['./common/url ', './common/formatdate ']},//output filename After the merger of Js will be named Bundle.js output: {path:build_path,//Note we have modified bundle.js with an array [name] instead, he will generate a number of JS files based on the entry's entry file name, this is the app. Js,mobile.js and Vendors.js)//hash This parameter generates a hash name script to prevent caching filename: ' [name]. [Chunkhash:6].js ',}, Externals: {//Remove the separately introduced Third-party library ' antd ': ' Antd ',//' react ': ' react ',//' react-dom ': ' REAC Tdom ',//' jquery ': ' jquery '}, Devtool: ' Source-map ', resolve: {extensions: [', '. js ', '. Jsx ', '. less ', ' . Scss ', '. css ']//suffix name auto-complement}, module: {loaders: [{test:/\.css$/, Loader:extracttextplugin . Extract (' Style-loader ', ' Css-loader ')}, {test:/\. ( png|jpg) $/,//Note the parameters of the following limit, automatically enable the Base64 code map loader: ' Url?limit=8192&name=images/[hash: ' When your picture size is less than this limit 8]. [Name]. [ext] '}, {test:/\.jsx?$/, Loader: ' Babel-loader ',//Include:app_path, exc Lude:/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: [//The following configuration can tell react is currently a production environment, please minimize the compression of JS, that is, the development environment in some of the prompts, warnings, judgments are all removed, DC after the following release of the code available. New Webpack.
    Defineplugin ({' process.env ': {NODE_ENV:JSON.stringify (' production ')//Define Production Environment}}), Package the array in the entry file into Verdors.js//new Webpack.optimize.CommonsChunkPlugin (' Vendors ', ' commons/vendors.js '),//New WEBPA Ck.optimize.CommonsChunkPlugin (//{//names: [' Vendors '],////filenames: [' vendors.js ', ' utils.js '],//filename: '/js/[name]. [Chunkhash:6].js ',//Minchunks:infinity//}], New Extracttextplugin (' [name].[ Chunkhash:6].css '),//created two Htmlwebpackplugin instances, generating two pages new Htmlwebpackplugin ({title: ' title ', Templ Ate:path.resoLve (Tem_path, ' index.html '), FileName: ' dist/tggl.html ',//chunks This parameter tells the plug-in to refer to the entry inside of the entrance//chunks: [' Postermanage ', ' vendors '], chunks: [' extendmanage '],//To insert the script into the label inject: ' Body '},// Compress CSS New Optimizecssassetsplugin ({assetnameregexp:/\.optimize\.css$/g, Cssprocessor:require (' Cssnano ') , cssprocessoroptions: {discardcomments: {removeall:true}}, Canprint:true}),//This uses UGLIFYJS to compress your J S code new Webpack.optimize.UglifyJsPlugin ({output: {comments:false,//Remove all comments}, compress:
  {//Remove warning and print Warnings:false, Drop_debugger:true, Drop_console:true}}) ]
};