前言：
用vue的都知道vue-cli是一个强大的构建vue项目的工具。vue-cli3.0前，它所有的配置都能看到，到vue-cli3.0后所有的配置都隐藏了。最近刚好有点空闲时间，自己就开始搭建了一个自己的vue-cli。第一小步：webpack4搭建vue的开发环境
配置过程中可以参照我配置好滴：vue-cli-forLog
准备：
因为是基于webpack4的，最好在开始配置前需要确保安装了Node.js是最新版本。
首先新建一个文件夹就叫myvue-cli吧，cd myvue-cli
之后运行以下命令
npm init -y
npm install webpack webpack-cli --save-dev
因为是基于webpack4的所以要安装webpack-cli，且webpack不推荐全局安装，这样会指定webpack的版本，使在不同的webpack版本中构建时失败。
下一步修改package.json文件，添加"private": true移除"main": "index.js"，以确保安装包是私有的，且不会意外发布代码。
新建一个build文件夹来存放配置文件，因为项目是要分还发环境和生产环境的，所以我们要把生产环境和开发环境的配置文件区分，又因为有些配置是公共的，所以需要一个公共配置文件，再通过webpack-merge来合并配置文件。
webpack.base.conf.js：最基本的配置
webpack.dev.conf.js：开发环境的配置
webpack.prod.conf.js：生产环境的配置
新建src/main.js作为入口文件
新建public/index.htm作为插入模板。index.html文件内容可以自己编写好
以上的准备好之后就可以慢慢滴来编写webpack的配置了。
开始：
webpack配置最最最主要的就是入口和输出了。so~在webpack.base.conf.js我的配置如下
entry: {
app: './src/main.js'
}
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/[name].js'
}
接下来就要对资源进行管理了。加载css、js、vue，图片等，自然需要安装相应的loader咯
npm i --save-dev style-loader css-loader vue-loader vue-style-loader vue-template-compiler url-loader babel-loader eslint-loader
css：style-loader css-loader
js：babel-loader
vue：vue-loader vue-style-loader vue-template-compiler
管理图片字体：url-loader或file-loader
eslint代码校验规范：eslint-loader
安装好loader之后就可以配置了。
-
关于babel配置
babel 7.x以上的要配合安装@babel/core @babel/preset-env,presets已不再使用babel-preset-2015，而是使用@babel/preset-env取代
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
webpack.base.conf.js
{
test: /\.js?$/,
use: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
}
-
关于eslint配置
eslint有助于我们的代码规范。网上有很多配置好的很规范的规则，拿来用即可。就不用我们自己去定制，当然你想自己定制也可以。
在这我是用的是标准的（standard）eslint规则
由于需要在 Vue 单文件组件的模板和脚本部分的代码校验，还需要安装官方的eslint-plugin-vue.
为了使eslint错误提示更美观，更详细我还安装了eslint-formatter-pretty插件
.eslintrc.js
...省略
parserOptions: {
parser: 'babel-eslint'
},
extends: [
"plugin:vue/essential",
"standard"
]
...
webpack.base.conf.js
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
options: {
formatter: require('eslint-formatter-pretty')
},
exclude: /node_modules/
}
关于vue-loader的配置就不多说了，可以直接查看官网：vue-loader
关于样式前缀自动补充配置
需要安装postcss-loader autoprefixer同时还要添加.postcssrc.js配置文件
.postcssrc.js
plugins: {
autoprefixer: {}
}
或
plugins: [
require('autoprefixer')
]
webpack.base.conf.js
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
还有个要注意的点：配置完成会你可能发现并没有自动添加前缀；这是由于autoprefixer会根据当前环境自动添加的。所以需要在package.json文件添加一点配置来保证打包的css会自动添加前缀
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
如果你的项目使用了@import来导入css，那么css-loader的配置参数importLoaders需要大于1。options: { importLoaders: 2 }
其它的一些loader配置一般不会有什么坑，就不说了。
loader配置好了，还要添加一些强大的plugins了
- 要想将打包好的js、css资源自动插入到html文件中就需要安装
html-webpack-plugin插件，这个插件会默认生成index.html如需要插入到自己指定的html文件，配置一下即可，具体可查阅html-webpack-plugin
列入插入到先前新建的public/index.html
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, '..', 'public/index.html')
})
要打包前清空上一次dist文件可使用
clean-webpack-plugin插件要提取css使用
mini-css-extract-plugin如果希望用
npm start命令构建可以在package.json的scripts中配置。
目前还没区分开发和生产环境就可以简单一点"start": "webpack --config build/webpack.base.conf.js"就行
以上配置好了先不急着区分开发环境和生产环境，先加点文件测试打包是否是预期想要的结果，成功后再来区分配置
开发环境配置
我使用的是webpack-dev-server来启动一个本地开发服务。对于webpack-dev-server的配置webpack官网有详细的讲解。我就不多说了，自己看着配！
地址：https://www.webpackjs.com/configuration/dev-server/
对于其他插件的配置，比如热更新什么的很简单的，就不说了
此外我希望我的开发环境的terminal也能像vue-cli那样打印启动的地址、编译进度等。具体可以看看我自己配置的【手动滑稽】。
效果图如下：
生产环境配置
生产环境就是要对文件进行压缩、打包。有css压缩，js压缩，js提取，sourceMap等。这些当然要配合一些插件来进行。我也不多说了，自己动手丰衣足食！顺便可以参照我配置的【手动狗头】。
最后
开发环境和生产环境区分了，要记得重新配置一下package.json文件啦~
以下是我的配置
"scripts": {
"dev": "set NODE_ENV=development && webpack-dev-server --config build/webpack.dev.conf.js",
"build": "set NODE_ENV=production && webpack --config build/webpack.prod.conf.js"
}
除此之外你还可以建一个config.js文件用于方便修改一些配置，比如开发环境启动端口，地址，代理配置，是否需要启用sourceMap等等。
到这里就结束啦。想要扩展的后续还可以集成一些测试环境。写的不好不要介意，不足之处还望多多指教。感谢~
PS：一个遗留问题：我希望通过端检测，在开发环境启动前判断配置的端口是否占用，占用则用新端口，即:上一个端口 + 1。然而我的并没有成功o(╥﹏╥)o。希望有大佬可以指点一下
以下是端口检测代码
function portIsOccupied (port) {
const net = require('net')
const server = net.createServer().listen(port)
let noOccPort = port
server.on('listening',() => {
noOccPort = port
server.close()
})
server.on('error',(err)=>{
if (err.code === 'EADDRINUSE') {
console.log(`${port}端口已被占用，自动启用端口:${port + 1}`)
portIsOccupied(port + 1)
}
})
return noOccPort
}
