Webpack配置区分开发环境和生产环境

　　在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境；

　　当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点：

　　开发环境的需求：

　　　　模块热更新（本地开启服务，实时更新）
　　　　sourceMap (方便打包调试)
　　　　接口代理　 (配置proxyTable解决开发环境中的跨域问题)

　　　　代码规范检查 (代码规范检查工具)

　　生产环境的需求：

　　　　提取公共代码　　　
　　　　压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)
　　　　文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)
　　　　去除无用的代码

　　开发环境和生产环境的共同需求：

　　　　同样的入口
　　　　同样的代码处理(loader处理)
　　　　同样的解析配置

　　　　在我们搭建好Vue-cli脚手架之后，我们的build文件夹会分别自动的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个webpack配置文件；

　　　　webpack.base.conf.js：webpack的开发环境和生产环境的共有配置(开发环境和生产环境都是需要执行的配置)

　　　　webpack.dev.conf.js：webpack的开发环境的特有配置(只在开发环境中执行，生产环境中不执行)

　　　　webpack.prod.conf.js：webpack的生产环境的特有配置(只在生产环境中执行，开发环境中不执行)

　　　　我们为什么要区分开发环境和生产环境呢？

　　　　　　因为一个项目的开发过程中肯定不会是一个版本开发完之后就立马上线，开发是必需，上线是目的；在开发的过程中会有各种各样的问题，比如开发环境中跨域、开发环境和生产环境因环境不同而产生的未知奇葩错误等等都是会时常发生的，我们区分环境的目的就是为了让开发人员在开发的过程中可以方便调试，保持高效的开发；让程序在生产环境中正常有效的运行；

　　　　webpack.base.conf.js配置

const path = require('path');
//清除build/dist文件夹文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//生成创建Html入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将css提取到单独的文件中
const MiniCssExtract = require('mini-css-extract-plugin');
//css压缩
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
//压缩js文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//引入webpack
const webpack = require('webpack');module.exports = {
//webpack 入口文件entry: './src/index.js',
//webpack 输出文件配置output: {//输出文件路径path: path.resolve(__dirname, 'dist'),//输出文件名filename: 'k-editor.[hash:8].js',},//配置插件plugins: [//使用插件清除dist文件夹中的文件new CleanWebpackPlugin({path: './dist'}),//使用插件生成Html入口文件new HtmlWebpackPlugin({//模板文件路径template: "./src/index.html",//模板文件名filename: "index.html",minify: {removeAttributeQuotes: true, //删除双引号,collapseWhitespace: true,    //压缩成一行，},hash: true}),//提取css到style.css中new MiniCssExtract({filename: 'style.css'}),],resolve: {// modules: [path.resolve('node_modules')],//只在当前目录下查找alias: { //别名'bootstrap': 'bootstrap/dist/css/bootstrap.css',},// mainFields: ['style', 'main'],//优先寻找style，// mainFiles: [],//入口文件的名字,默认index.js// extensions: ['js', 'css', 'json', 'vue']//扩展名顺序},//loader加载器模块配置module: {rules: [{//正则表达式匹配.css为后缀的文件test: /\.css$/,//使用loaderuse: [MiniCssExtract.loader,'css-loader',{loader: "postcss-loader"},]//正则表达式匹配.less为后缀的文件//使用lodaer来处理}, {test: /\.less$/,use: [MiniCssExtract.loader,'css-loader',{loader: "postcss-loader"},'less-loader']},/* {test: /\.js$/,//不包括node_modulesexclude: /node_modules/,use: [{loader: "eslint-loader",options: {enforce: 'pre'    //强制更改顺序，pre 前  post 后}}],},*/{test: /\.js$/,  //普通的loader//不包括node_modulesexclude: /node_modules/,use: [{loader: "babel-loader"}]},{test: /\.html$/,use: ['html-withimg-loader']},{test: /\.(gif|png|jpg)$/,use: [{loader: "url-loader",options: {//图片小于10kb就是图片地址，大于正常打包成base64格式编码    limit: 10000,//输出路径outputPath: 'img/'}}]}]},
};

　　webpack.dev.conf.js：

//引入webpack-merge插件进行合并
const {merge} = require('webpack-merge');
//引入webpack.base.conf.js文件
const base = require('./webpack.base.conf');
//引入webpack
const webpack = require('webpack');
//进行合并，将webpack.base.conf.js中的配置合并到这
module.exports = merge(base, {//模块参数mode: 'development',devServer: {contentBase: './dist',//端口号port: '8383',inline: true,historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.htmlhot: true//允许热加载},
//启用source-map方便调试devtool: 'source-map',plugins: [//定义全局变量new webpack.DefinePlugin({//这里必须要解析成字符串进行判断，不然将会被识别为一个变量DEV: JSON.stringify('dev')})]
});

　　webpack.prod.conf.js:

const {merge} = require('webpack-merge');
const base = require('./webpack.base');const path = require('path');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');module.exports = merge(base, {mode: 'production',optimization: {minimizer: [//压缩CSS代码new OptimizeCss(),//压缩js代码new UglifyJsPlugin({//启用文件缓存cache: true,//使用多线程并行运行提高构建速度parallel: true,//使用 SourceMaps 将错误信息的位置映射到模块sourceMap: true})]},plugins:[//使用插件定义全局变量DEVnew webpack.DefinePlugin({DEV:JSON.stringify('production')})]});

　　最后在配置一下package.json文件就可以了：

"scripts": {"test": "npm  run test","dev": "webpack-dev-server --config webpack.dev.js","build": "webpack --config webpack.prod.js"},

　　　　如何区分开发环境和生产环境呢？

　　　　　　在node中，我们有一个对象process对象，它里面包括的一些信息，env和它的一些属性，当然NODE_ENV是我们自己加上去的自定义属性，用来区分环境变量，也就是通过这个变量来进行区别是开发环境还是生产环境；但是有个问题，不同电脑上设置的方式是不一样的，所以cross-env就来了，它可以跨平台设置环境和使用环境变量。

npm install cross-env

　　我们在webpack.base.conf.js文件中修改代码：

const NODE_ENV=process.env.NODE_ENV;
console.log(NODE_ENV);

　　然后我们修改package.json文件：

//--config是可以设置我们执行哪个webpack文件，默认是执行webpack.config.js,但是我们现在修改文件名了，所以我们要设置一下
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js"

　　就这样，我们就实现了利用webpack来区分开发环境和生产环境，当我们用npm run dev运行的时候就是开发环境，当我们运行npm run build的时候就是构建生产环境打包；

Webpack配置区分开发环境和生产环境相关推荐

webpack开发环境和生产环境的配置区别
1.定义: 开发环境:开发人员调试开发的一种环境: 方便调试,保持高效的开发生产环境:发布上线的环境: 让程序在生产环境中正常有效的运行开发环境的需求: 模块热更新 (本地开启服务,实时更新) s ...
process.env环境变量配置方式（配置环境变量区分开发环境和生产环境）
一.process.env 为何物? 言归正传. process.env 是 Node.js 中的一个环境变量.其中保存着系统的环境的变量信息.可使用 Node.js 命令行工具直接进行查看: 1.安 ...
python开发环境和运行环境的区别_Django 开发环境与生产环境的区分详解
Django 开发环境与生产环境的设置在常规的Django工程开发中,我们经常会遇到一类问题,即:本地开发环境跟远程服务器生产环境配置不一样.对于这些不同之处,以前的做法是直接修改生产环境中的配置. ...
springboot 常用配置之多环境配置(开发环境、测试环境、生产环境等)
在上一课中我们通过idea工具没有做任何配置就构建了一个springboot项目,并且已经成功启动了,但我们都很清楚这些都远远不能达到我们实际项目的需求,比如我们要引入我们自己的redis配置.mys ...
Django 开发环境与生产环境的区分详解
Django 开发环境与生产环境的设置在常规的Django工程开发中,我们经常会遇到一类问题,即:本地开发环境跟远程服务器生产环境配置不一样.对于这些不同之处,以前的做法是直接修改生产环境中的配置. ...
12、区分开发环境和生产环境
开发环境和生产环境的构建目标差异很大.在开发环境中,我们需要强大的.具有实时重新加载或热模块替换能力和本地服务器.而在生产环境中,我们目标则转向于关注更小的包,以及资源的优化,以改善加载时间.所以我们 ...
Django开发环境与生产环境的配置
项目实际开发过程中需要区分开发环境与生产环境获取环境数值 ENV_PROFILE = os.getenv("ENV") 通过获取到的ENV_PROFILE来区别开发环境与生产环境 ...
Angular5.x多环境配置(开发环境、生产环境、测试环境)
实际开发中,我们经常需要配置多个环境,如:开发环境.生产环境.测试环境,比如接口的地址在不同环境下各有一个地址,如: 开发环境:http://dev.xxx.xxx 生产环境:http://www.x ...
Vue.config.js开发环境与生产环境配置
Vue.config.js开发环境与生产环境配置首先在项目根目录创建 .env.development 开发环境 .env.production 生产环境 VUE_APP_SERVICE_URL V ...

Webpack配置区分开发环境和生产环境

Webpack配置区分开发环境和生产环境相关推荐

最新文章

热门文章