用 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

推薦本地安裝

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

  1. 建立 wbp-vue 項目目錄(能夠根據項目起名)webpack

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

npm init -y
複製代碼
  1. 在 wbp-vue 中安裝 webpack
npm install --save-dev webpack
複製代碼
  1. 在 wbp-vue 中安裝 webpack-cli(若是你使用 webpack 4+ 版本,你還須要安裝 CLI。)
npm install --save-dev webpack-cli
複製代碼

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

複製代碼

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

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

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

相關文章
相關標籤/搜索