webpack-从零开始定制一个自己的vue-cli（第一步）

前言：

用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那样打印启动的地址、编译进度等。具体可以看看我自己配置的【手动滑稽】。
效果图如下：

image.png

生产环境配置

生产环境就是要对文件进行压缩、打包。有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
}