WebPack2は私のVue開発環境を設定します

まず、node / vue / webpackがグローバルにインストールされています。

新しいフォルダdemo4を作成して初期化する

cd demo4
npm init -y

これは、package.jsonファイルを生成するページです。

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 [email protected] -save-dev
npm install html-webpack-plugin -save-dev
npm install vue -save

webpack-dev-serverWebPACKの-devのサーバーが小型のNode.js Expressサーバ、我々は主に熱過負荷コードを達成するためにそれを使用しているが、具体的な方法はで見つけることができます読んで、WebPACKの-devのサーバーの使用状況私は私に来ない〜
vue-loader/vue-html-loader/css-loader/vue-style-loader... :ローダーでWebPACKの役割は、ドキュメントの使用状況を確認するために、話すことはあまりないです
ホットリロード- VUE APIは: VUE-ホットリロード-APIの名前が示す、この場合も、熱過負荷VUE達成さpackage.jsondevDependenciesdependenciesそのようにすべきです:

"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:編集したファイルテンプレートなどを保存する
コンポーネント:コンポーネントコンポーネントを格納する

  • Src / index.html

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

  • Src / js / index.js

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

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

  • Src / components / Hello.vue

<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.js

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 :ページのindex.htmlページを開いて、ファイルディレクトリのdist JS / index.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.は利用できません。どちらか一方の機能をレンダリングにテンプレートをプリコンパイル、またはコンパイラ付属のビルドを使用しています。これはあるので、あなたは、次の公式を読むことができvue.runtime.common.jsの使用文書の建物は独立して動作VSを構築し 、実行時に建てられ、理解するのは簡単でレンダリング機能用にコンパイルされ、独自の独立した文字列テンプレート(テンプレート)(レンダリング)を構築した後、コンパイラを呼び出し、優れたレンダリング機能を実行することができますVue2を起動した後は、サーバー側でレンダリングを行うために、ブラウザとのDOMインターフェイスに依存せず、テンプレートテンプレートを使用できないため、スタンドアロンビルドよりも小さいですが、テンプレートテンプレートは使用できません。 これは、デフォルトでエクスポートのランタイムパッケージNPMを構築することです。 スタンドアロンビルドを使用する場合は、次のコードを追加できます

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

この文は、もちろん、我々はなりますまた、オープンnode_modules / VUE / package.jsonファイル、できているwebpack.config.jsに追加されたmainポイント「 dist/vue.runtime.common.js 」に変更されました'vue/dist/vue.common.js'

この時点再実行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のホット・オーバーロードを設定するために新しいプラグインが必要です。

元のリンク