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

今天咱們來經過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 和一些圖片文件

未完待續哦~~