vue2+webpack构建项目

//全局安装webpack-dev-server

npm install -g webpack webpack-dev-server

//项目目录下初始化

npm init -y

//项目目录下安装依赖

npm install webpack webpack-dev-server style-loader css-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

//vue相关依赖

npm install vue vue-loader vue-html-loader vue-style-loader  vue-hot-reload-api vue-template-compiler --save-dev

//安装vue

npm install vue --save

webpack.config.js webpack配置文件

module.exports = {
    devtool: "sourcemap",
    //入口文件
    entry: "./static/js/entry.js",
    output: {
        filename:"bundle.js"
    },
    module: {
        loaders: [
            //css loader
            {
                test: /\.css$/,
                loader: "style!css"
            },
            //js loader
            {
                test: /\.js$/,
                loader: "babel",
                exclude: /node_modules/
            },
            //vue loader
            {
                test: /\.vue$/,
                loader: "vue"
            }
        ]
    },
    resolve: {
        //vue别名
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    babel: {
        presets: ['es2015','stage-0'],
        plugins: ['transform-runtime']
    }
};

entry.js 入口文件

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

//使用全局函数注入组件，就不用import和在创建Vue对象时定义components键值
Vue.component('Hello', require("../../src/components/Hello.vue"));

new Vue({
    el: "#app",
    //定义template可以不用在html中插入""
    //template: '',
    //components: { Hello }
});

require('../css/style.css');

//显示加载的模块,加载的原因
//webpack --display-modules --display-reasons

//webpack -d

//优化并压缩
//webpack -p

//watch监控，自动执行webpack
//webpack -w

//监控并热加载
//webpack-dev-server --inline --hot

Hello.vue

index.html

  
    
    
    
    
  
  
    

    
it works