Webpack + vue-loader构建单文件vue组件

来源：互联网发布：淘宝图片空间授权失败编辑：程序博客网时间：2024/04/29 19:43

1.开始

创建下面目录：

修改package.json:

[javascript] view plain copy
{  
  "name": "vue",  
  "version": "0.0.1",  
  "description": "My vue",  
  "author": "minixu",   
  "dependencies": {  
    "vue": "^1.0.26",  
    "webpack": "^1.13.1"  
  },  
  "devDependencies": {  
    "babel-core": "^6.1.2",  
    "babel-loader": "^6.1.0",  
    "babel-plugin-transform-runtime": "^6.1.2",  
    "babel-preset-es2015": "^6.1.2",  
    "babel-preset-stage-0": "^6.1.2",  
    "babel-runtime": "^5.8.0",  
    "css-loader": "^0.23.0",  
    "style-loader": "^0.13.0",   
   "vue-html-loader": "^1.2.3",  
    "vue-loader": "^7.3.0",   
    "webpack": "^1.13.1",  
    "webpack-dev-server": "^1.14.1"  
  }  
}  

加载依赖模块：

[javascript] view plain copy
$npm install   

如果实在下载不下来建议使用cnpm进行下载：

[javascript] view plain copy
$npm install cnpm -g     

[javascript] view plain copy
$cnpm install   

配置webpack.config.js:

[javascript] view plain copy
//webpack.config.js  
module.exports = {  
  // 入口文件  
  entry: './src/main.js',  
  // 编译输出的文件路径  
  output: {  
    //`dist`文件夹  
    path: './dist',  
    // 文件 `build.js` 即 dist/build.js  
    filename: 'build.js',   
  },  
  //加载器  
  module: {  
    loaders: [{  
      test: /\.vue$/,   
      exclude: /node_modules/,  
      loader: 'vue-loader'  
    }, {  
        test: /\.css$/,   
        exclude: /node_modules/,  
        loader: 'style-loader!css-loader'  
      }, {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        loader: 'babel'  
      }]  
  },  
  babel: {  
    presets: ['es2015', 'stage-0'],  
    plugins: ['transform-runtime']  
  }   
}  

在Vue根目录下创建index.html：

[javascript] view plain copy
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <App></App>   
    <script src="dist/build.js"></script>  
</body>  
</html>  

在src目录下创建main.js文件：

[javascript] view plain copy
//es6加载模块  
import Vue from 'vue'  
import App from './views/index.vue'  
  
//创建一个vue实例,挂载在body上面  
new Vue({   
    el: 'body',  
    components: { App }  
})  

在src/views目录下创建index.vue:

[javascript] view plain copy
 <pre name="code" class="javascript"><template>  
    <p>{{ message }}</p>  
    <input v-model="message">  
</template>  
  
  
<script>   

[javascript] view plain copy
    export default{   
        data(){   
            return {  
                message: 'Hello Vue.js!'  
            }  
        }  
    }  
</script>  

我们所有需要的文件都准备好了，进行打包：

cmd到文件根目录输入 webpack:

打开index.html：

成功！

2.热加载

我们在上篇webpack中讲了一下热加载，现在我们运用到这个项目上来。

我们在package.json中已经依赖了webpakc-dev-server模块，所以我们直接使用

[javascript] view plain copy
$webpack-dev-server  

看到启动成功

我们修改代码试试：

index.vue:

[javascript] view plain copy
<template>  
    <p>{{ message }}</p>  
    <input v-model="message">  
    <button v-on:click="reverseMessage">Reverse Message</button>  
</template>  
  
<script>  
    export default{   
        data(){   
            return {  
                message: 'Hello Vue.js!'  
            }  
        },  
        methods: {  
            reverseMessage: function () {  
            this.message = this.message.split('').reverse().join('')  
            }  
        }  
    }  
</script>  

发现不管是刷新页面还是重启服务都没用。

那我们试试打包：

成功了？？？？？？？？

我们知道打包方式是生成文件到磁盘中，而热加载方式是生成文件到内存中。

查下官网关于Webpack-dev-server,发现配置是这样的

[javascript] view plain copy
var path = require("path");  
module.exports = {  
  entry: {  
    app: ["./app/main.js"]  
  },  
  output: {  
    path: path.resolve(__dirname, "build"),  
    publicPath: "/assets/",  
    filename: "bundle.js"  
  }  
};  

因为我们的index.html中的路径为dist/build.js

而内存中生成的bulid.js文件路径是不在dist文件夹下的，所以是找不到内存中的bulid.js的，找到的是在改文件夹下我们以前打包的文件。

不信删掉dist/bulid.js试试。

所以我们需要指定一个 publicPath

修改我们的webpack.config.js:

[javascript] view plain copy
 //webpack.config.js<pre name="code" class="javascript">module.exports = {  
  // 这是一个主文件包括其他模块  
  entry: './src/main.js',  
  // 编译的文件路径  
  output: {  
    //`dist`文件夹  
    path: './dist',  
    // 文件 `build.js` 即 dist/build.js  
    filename: 'build.js',   
    publicPath: '/dist/'  
  },  
  module: {  
    loaders: [{  
      test: /\.vue$/,   
      exclude: /node_modules/,  
      loader: 'vue-loader'  
    }, {  
        test: /\.css$/,   
        exclude: /node_modules/,  
        loader: 'style-loader!css-loader'  
      }, {  
        test: /\.js$/,  
        exclude: /node_modules/,  
        loader: 'babel'  
      }]  
  },  
  babel: {  
    presets: ['es2015', 'stage-0'],  
    plugins: ['transform-runtime']  
  }   
}  

再启动一次

[javascript] view plain copy
$webpack-dev-server  

访问http://localhost:8080/webpack-dev-server/

修改index.vue

[javascript] view plain copy
<template>  
    <p>{{ message }}</p>  
    <p> {{ message.split('').reverse().join('') }}</p>  
    <input v-model="message">  
    <button v-on:click="reverseMessage">Reverse Message</button>  
</template>  
  
<script>  
    export default{   
        data(){   
            return {  
                message: 'Hello Vue.js!'  
            }  
        },  
        methods: {  
            reverseMessage: function () {  
            this.message = this.message.split('').reverse().join('')  
            }  
        }  
    }  
</script>  

点开刚刚的页面，哇塞，不用重启不用刷新就变了，好神奇！

3.vue-cli

0 0