生产(线上)环境
	1、在webpack.config.js文件中引入
		
		var webpack=require("webpack")

	2、在plugins中添加

    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    })

	// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）

	//中的'dev'为package.json中scripts内的webpack服务器的别名

	3、在package.json中scripts内修改
		(1)在服务器处添加NODE_ENV=dev;

			修改后为	"dev": "cross-env NODE_ENV=dev webpack-dev-server --progress --content-base dist --inline"


		(2)在webpack即打包处修改"built"后内容

			修改后为
			"build": " cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress",

			其中:
			1、--config ./webpack.production.config.js
			表示生产(使用npm run build命令时)时,使用该配置文件
			2、cross-env 表示在windows环境下运行需要的东西

	4、在项目根目录创建webpack.production.config.js文件
		(1)将webpack.config.js文件中的内容复制到该文件

		(2)引入文件
			1、项目中的package.json
				var pkg=require("./package.json")
			2、var path =require("path")

		(3)修改entry
			entry:{
				app:path.resolve(__dirname,"src/app.js"),
				vendor:Object.keys(pkg.dependencies)
			}

			其中:
			1、vendor:Object.keys(pkg.dependencies) 
				表示将其中的文件单独打包出来,即可以
				删除,然后通过网络cdn,类似网络地址引入jq方式引入

			2、entry路径中的src前面不能加/

		(4)在plugins中添加插件
			(1)webpack 内置的 banner-plugin,即版权内容

			new webpack.BannerPlugin("@Copyright jeff 2020/2/9"),

			(2)定义为生产环境，编译 React 时压缩到最小

			    new webpack.DefinePlugin({
			      'process.env':{
			        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
			      }
			    }),

			(3)压缩去掉警告

			    new webpack.optimize.UglifyJsPlugin({
			        compress: {
			          //supresses warnings, usually from module minification
			          warnings: false
			        }
			    }),

			(4)提取公共代码

			    new webpack.optimize.CommonsChunkPlugin({
			      name: 'vendor',
			      filename: '/js/[name].[chunkhash:8].js'
			    }),

	5、在windows环境下安装(其他环境不需要)
			cnpm install --save-dev [email protected]

	6、安装依赖
			cnpm install --save-dev [email protected]

代码示例:

webpack.production.config.js文件

var path=require('path');
var pkg=require("./package.json")
var webpack=require("webpack")
var browserOpen=require("open-browser-webpack-plugin");
var htmlTemp=require("html-webpack-plugin")


module.exports={
	// entry:path.resolve(__dirname,"/src/app.js"),
	entry:{
		app:path.resolve(__dirname,"src/app.js"),
		vendor:Object.keys(pkg.dependencies)
	},
	output:{
		filename:'boundle.js',
		// path:path.resolve(__dirname,"/dist")
		path:__dirname+"/dist"
		
	},
	//内置插件省略文件js和jsx后缀名
	resolve:{
		extensions:['.js','.jsx']
	},

	module:{
			rules:[{
					test:/\.json$/,
					use:"json-loader"
				},
				{
					test:/\.(js|jsx)$/,
					use:"babel-loader",
					exclude:/node_modules/

				}
				,
				{
					test:/\.css$/,
					use:[
					"style-loader",
					"css-loader"
					]

				}
				,
				{
					test:/\.(png|jpg|jfif|gif)$/,
					use:"url-loader?limit=2048"//图片大于两兆进行压缩
					//
				},
				{
					test:/\.less$/,
					use:["style-loader","css-loader","less-loader"]
				}
			]
		}
		,
	plugins:[

		// webpack 内置的 banner-plugin
   		new webpack.BannerPlugin("@Copyright jeff 2018/7/31"),

		new browserOpen({
			url:"http://localhost:8080/"
		}),
		new htmlTemp({
			template:__dirname+'/src/index.temp.html'
		}),
		 // 定义为生产环境，编译 React 时压缩到最小
	    new webpack.DefinePlugin({
	      'process.env':{
	        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
	      }
	    }),

	    // 压缩去掉警告
	    new webpack.optimize.UglifyJsPlugin({
	        compress: {
	          //supresses warnings, usually from module minification
	          warnings: false
	        }
	    }),

	    // 提供公共代码
	    new webpack.optimize.CommonsChunkPlugin({
	      name: 'vendor',
	      filename: '/js/[name].[chunkhash:8].js'
	    })

	]
}

webpack.config.js文件:

// var path=require('path');
var webpack=require("webpack")
var browserOpen=require("open-browser-webpack-plugin");
var htmlTemp=require("html-webpack-plugin")


module.exports={
	// entry:path.resolve(__dirname,"/src/app.js"),
	entry:__dirname+"/src/app.js",
	output:{
		filename:'boundle.js',
		// path:path.resolve(__dirname,"/dist")
		path:__dirname+"/dist"
		
	},
	//内置插件省略文件js和jsx后缀名
	resolve:{
		extensions:['.js','.jsx']
	},

	module:{
			rules:[{
					test:/\.json$/,
					use:"json-loader"
				},
				{
					test:/\.(js|jsx)$/,
					use:"babel-loader",
					exclude:/node_modules/

				}
				,
				{
					test:/\.css$/,
					use:[
					"style-loader",
					"css-loader"
					]

				}
				,
				{
					test:/\.(png|jpg|jfif|gif)$/,
					use:"url-loader?limit=2048"//图片大于两兆进行压缩
					//
				},
				{
					test:/\.less$/,
					use:["style-loader","css-loader","less-loader"]
				}
			]
		}
		,
	plugins:[
		new browserOpen({
			url:"http://localhost:8080/"
		}),
		new htmlTemp({
			template:__dirname+'/src/index.temp.html'
		})

	]
}

package.json文件:

{
  "name": "code",
  "version": "1.0.0",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "open-browser-webpack-plugin": "^0.0.5",
    "path": "^0.12.7",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hot-loader": "^4.12.19",
    "react-tools": "^0.13.3",
    "react-transform": "^0.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.7"
  },
  "scripts": {
    "build": " cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --progress --content-base dist --inline"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}