webpack3 搭建生产(线上)环境

浅浅的花香味﹌ 2021-07-24 11:48 519阅读 0赞

生产(线上)环境
    	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 cross-env@5.2.0
    
    	6、安装依赖
    			cnpm install --save-dev babel-plugin-react-transform@3.0.0

代码示例:

**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"
      }
    }