用 webpack 配置 vue 的單頁面應用

1、什麼是 webpack？

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

2、爲何使用 webpack?

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

3、安裝

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

推薦本地安裝

對於大多數項目建議本地安裝。這可使咱們在引入破壞式變動(breaking change)的依賴時，更容易分別升級項目。一般，webpack 經過運行一個或多個 npm scripts，會在本地 node_modules 目錄中查找安裝的 webpack：

1. 建立 wbp-vue 項目目錄（能夠根據項目起名）

2. 在 wbp-vue 中生成 package.json

npm init -y
複製代碼

3. 在 wbp-vue 中安裝 webpack

npm install --save-dev webpack
複製代碼

4. 在 wbp-vue 中安裝 webpack-cli（若是你使用 webpack 4+ 版本，你還須要安裝 CLI。）

npm install --save-dev webpack-cli
複製代碼

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

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

• 在 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"
  }
}

複製代碼

npm run dev 在命令行中執行就能夠跑起來了

npm run build 在命令行中執行就能夠打包了

注意：修改webpack配置文件後若是是開發中，要重啓 npm run dev ;若是生產環境，要從新打包