使用 Webpack 打造 vue – todo 應用實踐（ 一 ）

Meils發表於2018-03-24
WebVue

今天我們來通過webpack前端構架工具去搭建一個vue的專案。首先來邊學邊做一些測試，之後會有第二篇、第三篇…

// 建立專案目錄
mkdir webpack_todo
cd webpack_todo

npm 初始化

npm init 
// 之後會通過npm初始化我們的專案檔案
// 隨之生成一個package.json，我們開發的依賴包都會顯示在這個裡面哦

目錄完善

-src
  - assets
       - images
           - 01.jpg
           - 02.jpg
           - 03.jpg
       - styles
           - test.css
           - test.style.styl
  - app.vue   // 模板檔案
  - index.js  // 入口檔案
-package.json
-webpack.config.js

安裝依賴

cnpm install --save-dev vue vue-laoder webpack webpack-cli css-laoder vue-template-compiler 
// 之後目錄下會出現一個`node_modules`的資料夾,該資料夾下面將會是我們所有的依賴包

完善檔案內容

// app.vue
// vue元件的三元素
<template>
  <div id="app">{{test}}</div>
</template>

<script>
export default {
  data() {
    return {
      test: "test"
    };
  }
};
</script>

<style scoped>
#app{
    color: #ccc;
}
</style>
// index.js
import Vue from `vue`              // 引入vue
import App from `./app.vue`        // 引入app元件
import `./assets/images/02.jpg`
import `./assets/styles/test.css`
import `./assets/styles/test-style.styl`

const root = document.createElement(`div`); // 根節點
document.body.appendChild(root);

new Vue({
  render: (h)=> h(App)             // 將App渲染至根節點
}).$mount(root)                    // 掛載到根節點
// webpack.config.js
const path = require(`path`)
module.exports = {
    mode: `development`,
    entry: path.join(__dirname, `src/index.js`),
    output:{
        filename: `bundle.js`,
        path: path.join(__dirname, `dist`)
    },
    module: {
        rules: [
          {
            test: /.vue$/,
            loader: `vue-loader`        // 處理vue
          },
          {
            test: /.css$/,              // 處理css
            use: [
              `style-loader`,
              `css-loader`
            ]
          },
          {
            test: /.(png|jpg|gif|svg|jpeg)$/,        // 處理圖片
            use: [
              {
                loader: `url-loader`,
                options: {
                  limit: 30000,
                  name: `[name]-[hash].[ext]`
                }
              }
            ]
          },
          {
            test: /.styl$/,                // 處理 stylus
            use: [
              `style-loader`,
              `css-loader`,
              `stylus-loader`
            ]
          }
        ]
    }
}
  • 記得npm安裝所有的loader
// package.json
// 列出package.json
{
  "name": "webpack_todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js" // 這裡設定 npm run build 
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "style-loader": "^0.20.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13"
  }
}

build打包一次

npm run build
// 會在dist目錄下生成build.js 和一些圖片檔案

未完待續哦~~

相關文章