用 webpack 配置 vue 的單頁面應用

時間 2019-11-17

標籤 webpack 配置 vue 頁面應用简体版

原文原文鏈接

1、什麼是 webpack？

webpack 是基於 Node.js 靜態資源的模塊打包器。當用 webpack 打包時，它會從一個起點開始查找各個模塊依賴關係，而且按照這些依賴關係把這些文件打成一個或者多個包；css

2、爲何使用 webpack?

1.模塊化，瀏覽器端的早期沒有模塊化，須要 js 文件只能經過 script 標籤手動控制依賴管理這些 js 文件的引入順序；而 webpack 能夠經過模塊化管理這些依賴； 2.自動編譯 less、sass
3.能夠把基於 JS 的擴展語言編譯成 JS；
4.開發時配置代理解決開發環境跨域html

3、安裝

前提條件：在開始以前，請確保安裝了 Node.js 的最新版本。使用 Node.js 最新的長期支持版本(LTS - Long Term Support)，是理想的起步。使用舊版本，你可能遇到各類問題，由於它們可能缺乏 webpack 功能以及/或者缺乏相關 package 包。vue

4、用 webpack 配置 vue 的單頁面應用

真實項目中咱們不是單獨使用 vue，而是結合 webpack等打包工具；由於 webpack 能夠更方便的實現模塊化，導入導出依賴。並且使用webpack配合 vue-loader，咱們的組件能夠寫成 .vue 的文件。vue-router

在 wbp-vue 中建立 src 目錄（src 存放打包前源文件）
- src 中建立 index.html
- src 中建立 main.js（主入口文件）
- src 中建立 components (components 存放 vue 組件)
在 wbp-vue 中建立 webpack.config.js

1. 在 webpack.config.js 中配置以下：

let HtmlWebpackPlugin = require('html-webpack-plugin'); // 打包時用一下

// Vue + webpack 單頁面應用須要安裝： vue-loader  vue-template-compiler
let VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入 vue-loader plugin

module.exports = {
    entry: './src/main.js', // 配置打包入口
    output: {
        path: __dirname + './dist', // 通常輸出目錄都叫 dist 或者 build
        filename: 'bundle.js' // 打包輸出的文件名
    },
    devtool: 'eval-source-map', 
    devServer: {
        contentBase: './src',
        port: 8001,
        open: true, // 自動啓動瀏覽器
        inline: true, // 文件內容修改，瀏覽器自動刷新
        historyApiFallback: true, // 單頁面應用切路由不刷新（history模式）
        proxy: {
          'api': {
              target: 'http://localhost:8000', // 和服務端同事聯調時，你須要和服務端同事要開飛機的 ip 或者域名（再次確認端口，域名有可能不是用的80或443）
              changeOrigin: true, // target是域名的話，要設置爲true
              secure: false // 不校驗安全與否
          }
        }
    },

    // 配置 loader 
    module: {
        rules: [
            { // 配置 babel (把 ES67 轉 ES5 ， 把 JSX 轉 JS)
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                },
                exclude: /node_modules/ // 不處理 node_modules 中的東西
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|woff|ttf)$/,
                use: 'url-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      }),
      new VueLoaderPlugin() // 除了上面配置 loader，這裏還要用一個插件
    ]
};

複製代碼

2. 配置時須要安裝

npm install --save vue
    npm install --save vue-router
    npm install --save-dev webpack-dev-server 
    npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
    npm install --save-dev css-loader style-loader
    npm install --save-dev less less-loader
    npm install --save-dev url-loader
    npm install --save-dev html-webpack-plugin
    npm install --save-dev vue-loader vue-template-compiler
複製代碼

3. 須要在 package.json 中的 scripts 對象中配置

"dev": "webpack-dev-server"
"build": "webpack",
"cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js",

{
  "name": "wbp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack", // 須要配置
    "cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js", // 須要配置
    "dev": "webpack-dev-server" // 須要配置
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

複製代碼