WebPack2配置個人Vue開發環境

時間 2019-11-09

標籤 webpack2 webpack 配置個人 vue 開發環境简体版

原文原文鏈接

首先已經全局安裝了node/vue/webpack;css

新建文件夾demo4並初始化

cd demo4
npm init -y

這是頁面會生成一個package.json文件。html

安裝webpack及相關插件

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install html-webpack-plugin --save-dev
npm install vue --save

webpack-dev-server: webpack-dev-server是一款小型的Node.js Express服務器，咱們使用它主要是爲了實現代碼的熱重載，具體使用方法可參見webpack-dev-server使用方法，看完還不會的來找我~
vue-loader/vue-html-loader/css-loader/vue-style-loader...: webpack中loader的做用很少講，用法看文檔
vue-hot-reload-api: vue-hot-reload-api顧名思義，亦爲實現vue熱重載
此時package.json中的devDependencies和dependencies應該是這樣的：vue

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-runtime": "^5.8.38",
    "css-loader": "^0.26.4",
    "vue-hot-reload-api": "^2.0.11",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.3",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "vue": "^2.2.2"
  }

創建文件目錄

demo4
    |__dist
    |   |__js
    |__src
    |   |__index.html
    |   |__js
    |   |    |__index.js
    |   |__components
    |      |__hello.vue
    |__node_modules
    |__package.json
    |__webpack.config.js

dist: 存放生成的文件
src: 存放編輯的文件模板等
components: 存放components組件node

src/index.htmlwebpack

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="test">
    <Hello></Hello>
</div>
</body>
</html>

src/js/index.jsgit

import Vue from 'vue';
import Hello from "../components/Hello.vue";

new Vue({
    el: "#test",
    template: '<Hello/>',
    components: { Hello }
})

src/components/Hello.vuegithub

<template>
    <div>{{msg}}</div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello World!'
            }
        }
    }
</script>

<style>
    html {
        background: green;
        color: #fff;
        font-size: 20px;
    }
</style>

webpack.config.jsweb

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, './src/js/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: './js/[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query:{
                  presets: 'es2015'  
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            hash: true
        })
    ]
}

命令行運行webpack命令，此時在dist文件目錄下分別生成了js/index.js和index.html，在頁面中打開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. 這是由於此時使用的是vue.runtime.common.js，這裏能夠閱讀如下官方文檔中的獨立構建VS運行時構建；簡單理解就是獨立構建能夠本身將字符串模板（template）編譯爲渲染函數（render），而後再運行時再調用編譯好的渲染函數，而運行時構建是在Vue2開始後，爲了實如今服務端渲染，不依賴與瀏覽器端的DOM接口，而不容許使用template模板，所以運行時構建比獨立構建要小，可是不能使用template模板，而官方文檔中也有說明。npm包中導出的默認是運行時構建。若是但願使用獨立構建，能夠添加如下代碼npm

webpack中
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

這句話是添加到webpack.config.js中的，固然，咱們也能夠打開node_modules/vue/package.json文件，將其中的main指向"dist/vue.runtime.common.js"改成'vue/dist/vue.common.js'。json

此時再從新運行webpack命令，可能還會報錯： Cannot find module 'vue-template-compiler' ，此時在命令行中運行npm install vue-template-compiler便可。在運行webpack命令，在瀏覽器中打開dist/index.html文件就能夠看到代碼完美運行了。咱們只須要在src/下修改咱們的Hello.vue或者是index.js以及index.html文件，而後運行webpack而後刷新頁面便可看到代碼的改動效果。固然，咱們期待的是隻修改代碼，不用從新運行webpack命令，甚至不須要刷新瀏覽器即看到代碼的改動效果，這時候須要新的插件來配置實現vue的熱重載。

相關標籤/搜索

每日一句

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