Webpack四、iView、Vue開發環境的搭建

時間 2019-11-10

標籤 webpack iview vue 開發環境搭建简体版

原文原文鏈接

導讀

項目使用了 yarn ，一個快速、可靠、安全的依賴管理工具。yarn 是一個相似於npm的包管理工具，它是由 facebook 推出並開源，它在速度，離線模式，版本控制的方面具備獨到的優點。此項目以此爲基礎，寫一個購物商城的單頁面應用，下面記錄了項目開始前開發環境的簡單搭建過程。css

更多信息和項目基礎搭建請點擊查看 webpack-iview-vue。html

查看最終的效果請點擊查看 View online。喜歡就給個 star 吧😄vue

詳細內容

建立一個文件夾
進入該文件並初始化：yarn init
安裝webpack和webpack-cli：yarn add webpack webpack-cli -D
安裝vue：yarn add vue
安裝：yarn add vue-loader less-loader postcss-loader css-loader style-loader url-loader file-loader html-webpack-plugin babel-loader babel-core babel-preset-env webpack-dev-server -D
升級upgrade vue-template-compiler到和vue一致的版本（非必須）：yarn upgrade vue-template-compiler@^2.5.16 -D

在根目錄下建立 index.html 文件：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商城</title>
  </head>
  <body>
    <!-- 對應 main.js 中的掛載目標 -->
    <div id="app"></div>
  </body>
</html>

根路徑下建立文件夾src（放置網頁基礎文件，並在其中建立文件app.vue：

<template>
  <div class="textStyle">{{ textData }}</div>
</template>

<script>
export default {
  data() {
    return {
      textData: 'Hello world'
    }
  }
}
</script>

<style>
.textStyle {
  background-color: aquamarine;
}
</style>

在src文件夾下建立入口文件main.js：

import Vue from 'vue';
import App from './app.vue';
new Vue({ // 建立 vue 實例
  el: '#app', // 提供一個在頁面上已經存在的 DOM 元素做爲 Vue 實例掛載目標
  render: (h) => h(App) // 聲明瞭 html 中的內容
})

根目錄下建立build文件夾(放置配置文件，並在其下建立webpack.config.js文件：

const path = require('path'); // node.js 中的基本包，用於處理路徑
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: path.join(__dirname,'../src/main.js'), // path.jion()將兩個參數表明的路徑相加組合起來，__dirname表明當前文件所在目錄
  output: {
    filename: 'bundle.js', //輸出文件的文件名
    path: path.join(__dirname,'../dist') // 輸出文件所在目錄
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.css$/,
        use: [
          'style-loader', // 爲 css 建立 style 標籤並置入其中插入頁面
          'css-loader', // 處理 css
          'postcss-loader', // 瀏覽器兼容問題
        ]
      },
      {
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader' // loader 由下往上依次開始處理
        ]
      },
      {
        test: /\.(jpg|png|gif|svg|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: { // 配置參數
              limit: 1024 // 比較標準，小於標準的圖片轉換爲 base64 代碼
            }
          }
        ]
      }
    ]
  },
  plugins: [
  // Vue-loader在15.*以後的版本都是 vue-loader的使用都是須要伴生 VueLoaderPlugin的
  new VueLoaderPlugin()
  ]
}

在package.json添加如下內容：

"dev": "webpack --config build/webpack.config.js --mode development",
"build": "webpack --config build/webpack.config.js --mode production"
//webpack 用於執行webpack默認位置默認名稱的配置文件webpack.config.js，其後跟的參數 --config 用於對修更名稱或位置後的配置文件的運行
//--mode 後指定模式，development模式下的文件不壓縮

在根目錄增長文件postcss.config.js：

module.exports = { 
  plugins: { 
    'autoprefixer': {browsers: 'last 5 version'} 
  } 
}

html-webpack-plugin：

// 在webpack.config.js下引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');
並在其plugins下增長：
new HTMLWebpackPlugin({ //建立 .html 並自動引入打包後的文件
  template: 'index.html', // 參照最初建立的 .html 來生成 .html
  inject: true
})

支持ES6:

// 並在webpack.config.js裏配置
{
  text: /\.js$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['env']
      }
    }
  ]
}

在webpack.config.js中與entry同級處設置：devtool: 'cheap-module-eval-source-map',
將 webpack.config.js 從新命名爲 webpack.base.config.js

修改webpack.base.config.js以下：

 "dev": "webpack-dev-server --base ./dist --open --inline --hot --compress --config build/webpack.base.config.js --mode development",
"build": "webpack --config build/webpack.base.config.js --mode production"