超級詳細的手寫webpack4配置來啓動vue2項目（附配置做用）

時間 2019-12-14

標籤超級詳細手寫 webpack4 webpack 配置啓動 vue2 vue 項目简体版

原文原文鏈接

基礎目錄結構以及各個文件的做用

初始npm項目

npm init

一路回車，一概使用默認的npm項目配置javascript

package.json修改scripts

以下：

{
  "name": "doing-a-webpack4-vue2-pro",
  "version": "1.0.0",
  "description": "超級詳細的手寫webpack4配置來啓動vue2項目（附配置做用）",
  "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 用來啓動命令 webpack-dev-server --config webpack/webpack.dev.config.js
這裏將開發環境(development)的配置 webpack/webpack-dev-config.js 傳入到啓動的server config中。詳情
故這裏須要作兩件事情：
a. npm install webpack-dev-server -D 開發依賴
b. 書寫 webpack.dev.config.js

書寫 webpack.dev.config.js

說明：
因爲 webpack.dev.config.js 與 webpack.prod.config.js 近似，因此手寫一個 webpack.base.config.js來減小配置耦合量。
提示： base.config與 dev.config須要用webpack提供的 webpack-merge 來合併
故這裏須要作兩件事情：
a. npm install webpack-merge -D 這個放到後面安裝config須要的依賴中一塊兒作，稍後會寫到
b. 書寫 webpack.base.config.js

書寫 webpack.base.config.js

webpack/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須要的開發依賴有:
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)
故在命令行執行以下命令
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
詳細的配置說明解釋幾天後給出

回到 webpack.dev.config.js

webpack/webpack.dev.config.js

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
    // 這是一個webpack的插件來建立html文件渲染你的webpack生成的bundle
    new HtmlWebpackPlugin({
      // 寫入bundle的那個index.html
      filename: 'index.html',
      template: 'index.html'
    })
  ]
})

咱們能夠看到，這裏dev.config須要的開發依賴有:
webpack-merge (前面提到的用來將dev.config和base.config合併的依賴)
html-webpack-plugin
故在命令行執行以下命令
npm install -D html-webpack-plugin webpack-merge

能夠開始寫vue啦！

src/main.js

咱們在上面的 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渲染
})

src/App.vue

簡單的一個首頁

<template>
  <div>
    <h1>Success</h1>
  </div>
</template>
<style>
  h1 {
    background: #FAFBBB
  }
</style>

如上，咱們須要引入vue，因此：
npm install vue -S (自動安裝2.x版本的vue)

最後

代碼結構:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="#" type="image/x-icon">
    <title>doing</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>