wepback基礎配置(構建一個vue-cli)--1

格砸發表於2018-02-03
Vue

前言： 使用了webpack和vue有一段時間了，但其實對於這兩者的配合使用原理一直模糊不清，這帶來了一些問題，比如優化，擴充新需求。我想要搞清楚從每一個配置項是為了什麼，我到底需不需要這些配置。趁著新的一年，先給自己定個小目標--掌握webpack。

此次學習過程以webpack中文文件為指導，結合vue官網文件進行實踐

webpack環境搭建

mkdir webpack-demo && cd webpack-demo

npm init

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

將用到的所有依賴庫通過npm/yarn的形式進行安裝，這使得webpack能夠構建一個依賴圖。

一步步搭建vue-cli

npm install vue
複製程式碼
專案目錄：
webpack-demo
  |- package.json
  |- webpack.config.js
  |- index.html
  |- /src
    |- app.js
複製程式碼
依賴打包：

index.html內容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>
複製程式碼

app.js內容：

import Vue from 'vue';
// import App from './App.vue';

Vue.config.devtools = true;
Vue.config.performance = true;
Vue.config.productionTip = false;

const app = {
  template: '<h1>HELLO,PADAKER</h1>'
}

new Vue({
  el: '#app',
  template: '<app />',
  components: {
    app
  }
});
複製程式碼

webpack.config.js內容：

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '')
  }
};
複製程式碼

此時執行npx webpack --config webpack.config.js，webpack會開始執行依賴打包，將所有依賴打包輸出到bundle.js中。此時我們在瀏覽其中開啟index.html，就會發現...出錯啦~

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

這是為啥呢，翻翻官網文件，發現我們的app.js檔案裡用到了template選項，就錯在這。vue需要將模板編譯器將字串模板編譯成render函式，但是runtime-only構建中不包含編譯器，因為加上編譯器vue的檔案體積會增大許多。so，有兩種解決方案：

  1. 加上編譯器，修改webpack.config.js
module.exports = {
  // ...
+  resolve: {
+   alias: {
+     'vue$': 'vue/dist/vue.esm.js'
+   }
+ }
}
複製程式碼

再次打包，開啟index.html，OK，但是發現bundle.js大了80KB（未壓縮）
2. 直接使用render函式取代template。

// ...
const app = {
- // template: '<h1>HELLO,PADAKER</h1>'
+ render(h) {
+   return h('h1', 'HELLO,PADAKER');
+ }
}

new Vue({
  el: '#app',
+ render(h) {
+   return h('app');
+ },
- // template: '<app />',
 components: {
    app
  }
});
複製程式碼
  1. 當然了，當使用.vue單檔案元件時，配合vue-loader直接就編譯成render函式了。（這也算是一個最佳實踐了）
指令碼命令（scripts）

為了方便，以至於每次要打包時都不需要輸入一長串命令字元，使用npm script，可以縮短命令長度。
說白了，它就是一個別名，在package.json裡面可有進行定義。
package.json：

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

再要進行打包，只需要在專案根目錄命令列中輸入npm run build。

相關文章