在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境；
当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点：
开发环境的需求：
模块热更新 （本地开启服务，实时更新）
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$/,
//使用loader
use: [
MiniCssExtract.loader,
'css-loader',
{
loader: "postcss-loader"
},
]
//正则表达式匹配.less为后缀的文件
//使用lodaer来处理
}, {
test: /\.less$/,
use: [
MiniCssExtract.loader,
'css-loader',
{
loader: "postcss-loader"
},
'less-loader'
]
},
/* {
test: /\.js$/,
//不包括node_modules
exclude: /node_modules/,
use: [{
loader: "eslint-loader",
options: {
enforce: 'pre' //强制更改顺序，pre 前 post 后
}
}],
},*/
{
test: /\.js$/, //普通的loader
//不包括node_modules
exclude: /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.html
hot: 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:[
//使用插件定义全局变量DEV
new 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的时候就是构建生产环境打包；
vue 全局环境切换
前端开发经常碰到切换环境的情况，测试环境，开发环境，正式环境，我们在utils中创建一个global.js文件main.js中使用
配置TypeScript工作环境
首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记，可能不会太深入的解读一些原理方面的东西。但尽可能的把基础的入门使用解析清楚，毕竟使用TypeScript来实现的项目一般是比较复杂的项目，不仅仅只是简单的语法使用
typescript开发环境搭建
ts为typescript的缩写，是javascript的超集。由于 Node 的官方模块仓库网速太慢，模块仓库需要切换到阿里的源。执行下面的命令，确认是否切换成功。如果输出为 taobao字样，则表示切换成功
vue ssr服务端渲染环境搭建
网上有关ssr开发环境搭建的文章不算多，就算找到也是比较高级的，不太适合新手入坑；这篇内容只抽取了其中最重要的部分，实现最基础的开发环境搭建；所谓开发环境无非两件事：自动打包·自动刷新页面,叫法比较土，也可以叫热更新，热加载。
Mac配置PHP开发环境
众所周知，Mac对开发者非常友好，内置了很多开发语言的环境，比如Ruby、Python、PHP，本文主要给大家说一下小明 PHP环境的配置。我们编写好的PHP文件需要在Apache下运行，但Apache服务在Mac种默认是关闭的
vue需要nodejs环境吗？
vue需要nodejs环境，vue是一个js，但是安装它却有点与众不同。安装vue一般是通过npm进行安装，node.js中包括了这个npm，所以安装完node.js就可以使用npm了。使用vue-cli搭建项目时也需要nodejs。
JavaScript运行时环境和标准
JavaScript 主要运行在浏览器端，随着技术不断发展出现很多服务端 JavaScript 运行时，甚至可以做硬件相关的嵌入式开发。
dependencies和devDependencies有区分意义吗？
其实我们并不会去关心哪些是生产环境所需依赖，哪些是开发环境所需依赖，但是这也正常，因为其实在SPA项目中，这两个东西并不需要区分！所以我们平时没有过多了解也正常！
又出新JS运行时了！JS运行时大盘点
在前端技术日新月异的今天，新的 JavaScript 运行时环境不断涌现，它们为开发者提供了更多的选择和可能性。近期，诸如 LLRT 和 WinterJS 等新运行时环境的发布
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!