webpack开发环境和生产环境的配置区别

1.定义：

开发环境：开发人员调试开发的一种环境: 方便调试，保持高效的开发
生产环境：发布上线的环境: 让程序在生产环境中正常有效的运行

开发环境的需求：
　　　　模块热更新（本地开启服务，实时更新）
　　　　sourceMap (代码映射，方便打包调试)
　　　　接口代理　 (配置proxyTable解决开发环境中的跨域问题)
　　　　代码规范检查 (代码规范检查工具)
生产环境的需求：
　　　　提取公共代码　　　
　　　　压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)
　　　　文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)
　　　　去除无用的代码
开发环境和生产环境的共同需求：
　　　　入口
　　　　代码处理(loader处理)
　　　　解析配置

2.webpack配置文件

搭建好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"},

3.webpack区分开发环境和生产环境

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

cross-env：跨平台设置环境和使用环境变量

npm install cross-env

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

const NODE_ENV=process.env.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开发环境和生产环境的配置区别相关推荐

Webpack配置区分开发环境和生产环境
在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...
(17/24) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换
(17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换 1. 概述生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.jso ...
process.env环境变量配置方式（配置环境变量区分开发环境和生产环境）
一.process.env 为何物? 言归正传. process.env 是 Node.js 中的一个环境变量.其中保存着系统的环境的变量信息.可使用 Node.js 命令行工具直接进行查看: 1.安 ...
springboot 常用配置之多环境配置(开发环境、测试环境、生产环境等)
在上一课中我们通过idea工具没有做任何配置就构建了一个springboot项目,并且已经成功启动了,但我们都很清楚这些都远远不能达到我们实际项目的需求,比如我们要引入我们自己的redis配置.mys ...
Angular5.x多环境配置(开发环境、生产环境、测试环境)
实际开发中,我们经常需要配置多个环境,如:开发环境.生产环境.测试环境,比如接口的地址在不同环境下各有一个地址,如: 开发环境:http://dev.xxx.xxx 生产环境:http://www.x ...
Vue.config.js开发环境与生产环境配置
Vue.config.js开发环境与生产环境配置首先在项目根目录创建 .env.development 开发环境 .env.production 生产环境 VUE_APP_SERVICE_URL V ...
Django开发环境与生产环境的配置
项目实际开发过程中需要区分开发环境与生产环境获取环境数值 ENV_PROFILE = os.getenv("ENV") 通过获取到的ENV_PROFILE来区别开发环境与生产环境 ...
webpack上线版（生产环境中推荐使用）
配置上线版(生产环境)webpack: 实际中将开发环境中和生产环境中打包配置是分开的,两者本质没太大区别,只是生产环境中的webpack打包配置要更加优化合理,下面将具体介绍一下生产环境中webpa ...
12、区分开发环境和生产环境
开发环境和生产环境的构建目标差异很大.在开发环境中,我们需要强大的.具有实时重新加载或热模块替换能力和本地服务器.而在生产环境中,我们目标则转向于关注更小的包,以及资源的优化,以改善加载时间.所以我们 ...