摘要：基礎(chǔ)目錄結(jié)構(gòu)以及各個(gè)文件的作用初始項(xiàng)目一路回車，一律使用默認(rèn)的項(xiàng)目配置修改如下超級詳細(xì)的手寫配置來啟動(dòng)項(xiàng)目附配置作用說明用來啟動(dòng)命令這里將開發(fā)環(huán)境的配置傳入到啟動(dòng)的中。

一路回車，一律使用默認(rèn)的npm項(xiàng)目配置

如下：

{
  "name": "doing-a-webpack4-vue2-pro",
  "version": "1.0.0",
  "description": "超級詳細(xì)的手寫webpack4配置來啟動(dòng)vue2項(xiàng)目（附配置作用）",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "dev": "webpack-dev-server --config webpack/webpack.dev.config.js"
  },
  "engines": {
    "node": ">= 8.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

說明：  
npm run dev 用來啟動(dòng)命令 webpack-dev-server --config webpack/webpack.dev.config.js  
這里將開發(fā)環(huán)境(development)的配置 webpack/webpack-dev-config.js 傳入到啟動(dòng)的server config中。詳情  
故這里需要做兩件事情：  
a. npm install webpack-dev-server -D 開發(fā)依賴  
b. 書寫 webpack.dev.config.js

說明：  
由于 webpack.dev.config.js 與 webpack.prod.config.js 近似，所以手寫一個(gè) webpack.base.config.js來減少配置耦合量。  
提示：base.config與dev.config需要用webpack提供的 webpack-merge 來合并  
故這里需要做兩件事情：  
a. npm install webpack-merge -D 這個(gè)放到后面安裝config需要的依賴中一起做，稍后會(huì)寫到  
b. 書寫 webpack.base.config.js

const path = require("path")
const { VueLoaderPlugin } = require("vue-loader")

const ifProd = process.env.NODE_ENV === "production" ? true : false

const config = {
  dev: {
    mode: "development",
    assetsPublcPath: "/",
    assetsSubDirectory: "./"
  },
  prod: {
    mode: "production",
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsPublcPath: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "./"
  }
}
module.exports = {
  mode: ifProd ? "production" : "development",
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.js"
  },
  output: {
    filename: "[name].bulde.[hash:10].js",
    path: ifProd ? config.prod.assetsPublcPath : config.dev.assetsPublcPath
  },
  resolve: {
    extensions: [".js", ".vue"],
  },
  devServer: {
    quiet: true
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: [
          {
            loader: "vue-loader",
          }
        ]
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["babel-preset-env"]
        }
      },
      {
        test: /.css$/,
        use: ["vue-style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

我們可以看到，這里base.config需要的開發(fā)依賴有:  
babel-loader@7 (7.x版本需要配合 babel-core babel-preset-env)
webpack (4.x版本需要配合 webpack-cli)  
css-loader (需要配合 vue-style-loader)  
vue-loader (需要配合 vue-template-compiler)  
故在命令行執(zhí)行如下命令  
npm install -D babel-loader@7 babel-core babel-preset-env webpack webpack-cli  
npm install -D css-loader vue-style-loader vue-loader vue-template-compiler  
詳細(xì)的配置說明解釋幾天后給出

const BaseConfig = require("./webpack.base.config")

const merge = require("webpack-merge")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = merge(BaseConfig, {
  plugins: [
    // https://github.com/ampedandwired/html-webpack-plugin
    // 這是一個(gè)webpack的插件來創(chuàng)建html文件渲染你的webpack生成的bundle
    new HtmlWebpackPlugin({
      // 寫入bundle的那個(gè)index.html
      filename: "index.html",
      template: "index.html"
    })
  ]
})

我們可以看到，這里dev.config需要的開發(fā)依賴有:  
webpack-merge (前面提到的用來將dev.config和base.config合并的依賴)  
html-webpack-plugin  
故在命令行執(zhí)行如下命令  
npm install -D html-webpack-plugin webpack-merge

我們在上面的 webpack.base.config.js 中寫到了 entry: {app: "./src/main.js"}  
這就是我們的vue入口了。如下:

import Vue from "vue"; // 引入vue
import App from "./App"; // 引入組件App

new Vue ({
  el: "#app", // 掛載到index.html中的#app上
  render: h => h (App) // 用App.vue渲染
})

簡單的一個(gè)首頁

如上，我們需要引入vue，所以：  
npm install vue -S (自動(dòng)安裝2.x版本的vue)

npm run dev

具體的項(xiàng)目源碼地址：https://github.com/Sotyoyo/do...  
源碼與本文章稍有出入，后期會(huì)做到統(tǒng)一，希望給個(gè)star支持一下！