vue-webpack-101

使用webpack4 從0到1構建一個vue 單頁專案

vue webpack 專案初始化

初始化

1. mkdir vue-webpack-101
2. cd vue-webpack-101
3. npm init （都懂 就不介紹了）
4. touch .gitignore （都懂 就不介紹了）

裝包

• Yarn add webpack vue vue-loader 根據包與包之間的依賴關係提示 繼續安裝其他包 這裡就不一一列出，後面會給完整的package.json，前期只需要 webpack vue vue-loader 這三個相關包就可以跑起來一個示例demo。

• 配置 script

"scripts": {
    "build": "webpack --config webpack.config.js"
}
複製程式碼

為什麼要在這裡面呼叫webpack而不是在終端裡面直接執行呢？因為只有在這裡呼叫webpack，它才會優先呼叫我們專案裡面安裝的webpack版本，如果我們在命令列裡面輸入webpack，它會調動全域性的webpack，這個時候全域性的webpack可能會跟我們專案中的webpack版本不一致，所以我們還是採取這種方式比較穩妥。

目錄

• vue-webpack-101
  • src
    • app.vue
    • index.js (入口檔案)
  • package.json
  • .gitignore
  • node_modules

構建

app.vue

<template>
  <div id="test">{{test}}</div>
</template>

<script>
export default {
  data() {
    return {
      text: 'abc',
    }
  }
}
</script>

<style>
 #test {
   color: brown;
 }
</style>
複製程式碼

index.js (入口檔案)

import Vue from "vue";
import App from "./app.vue";

const root = document.createElement('div');
document.body.appendChild(root);

new Vue({
  render: (h) => h(App)
}).$mount(root)
複製程式碼

webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');  //*1 這裡

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin() //*1 這裡
  ]
}
複製程式碼

一步一步的解決報錯

錯誤1

1 引入VueLoaderPlugin解決了問題如圖

vue-loader

錯誤2

webpack.config.js 新增如下規則

// this will apply to both plain .css files
// AND <style> blocks in vue files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
複製程式碼

warning 1

webpack.config.js

entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  mode: 'development',
複製程式碼

至此，npm run build 終於跑起來了

結果圖

配置開發環境執行專案

安裝依賴

npm install --save-dev webpack-dev-server
複製程式碼

配置 webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  resolve: {
    extensions: [".js", ".json", ".css", '.vue']
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain .js files
      // AND <script> blocks in vue files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain .css files
      // AND <style> blocks in vue files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'), // 模板檔案
      inject: 'body' // js的script注入到body底部
    })
  ]
}
複製程式碼

配置script

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
  }
複製程式碼

執行npm run dev

完結散花

github.com/wuweijia/vu…

TODO

• [ ] 資源優化