webpack2.X、Vue學習以及將二者相結合

時間 2019-11-16

標籤 webpack2.x webpack vue 學習以及二者相結合简体版

原文原文鏈接

在家的閒暇時間來完善本身的前端知識。javascript

通過兩三天的學習，按照webpack文檔學習，vue文檔學習，最後實現了二者結合的目標。css

webpack

按照網站上guide的流程依次學習html

一、使用npm安裝webpack
二、設置輸入文件，好比怎樣引入css，images，fonts，data
三、設置輸出文件，好比能夠根據本身的設置來決定輸出腳本的名稱，生成新的頁面，在每次生成新頁面以前先把舊的頁面進行清理
四、開發過程當中，使用source maps來顯示提示信息，方便開發者定位錯誤的信息，使用本地服務器訪問頁面。
五、對於輸出的文件進行壓縮，減少文件的大小前端

Vue

一、使用npm進行安裝vue
二、在webpack的入口文件中使用vue

import Vue from 'vue';java

引入vue，這樣會報錯，錯誤顯示引入的是vue.runtime.esm.js，當咱們在webpack中使用：webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

就能夠解決報錯；web

3.最後引入npm

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

代碼展現

目錄結構：服務器

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue page</title>
    <div class="" id="main">
      <div class="" id="head">

      </div>
      <div class="" id="container">
        {{message}}
      </div>
      <div class="" id="foot">

      </div>
    </div>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script></body>
</html>

webpack.config.js

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  entry : {
    app : './resourse/script/app.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new UglifyJSPlugin()
  ],
  output : {
    filename : '[name].bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  resolve: {
   alias: {
     'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
   }
 }
}

app.js

import _ from 'lodash';
import Vue from 'vue';

var app = new Vue({
  el: '#container',
  data: {
    message: 'Hello Vue!'
  }
})

最後，能夠看到一個經典的hello world顯示在頁面上。

到此時我認爲最簡單的webpack和vue已經結合，能夠正常的進行前端的開發了，ok，我先開始使用一下本身的勞動成果，使用vue開發一下通用的組件，啦啦啦~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。