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官网有详细的讲解。我就很少说了，本身看着配！

地址：www.webpackjs.com/configurati…

对于其余插件的配置，好比热更新什么的很简单的，就不说了

此外我但愿个人开发环境的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
}
复制代码