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

1.开始

创建下面目录：

修改package.json:

{
  "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"
  }
}

加载依赖模块：

$npm install 

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

$npm install cnpm -g   

$cnpm install 

配置webpack.config.js:

//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：

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

//es6加载模块
import Vue from 'vue'
import App from './views/index.vue'

//创建一个vue实例,挂载在body上面
new Vue({ 
    el: 'body',
    components: { App }
})

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

 



 
  
 
  
 
  
 
  
 
  
我们所有需要的文件都准备好了，进行打包：
 
  
cmd到文件根目录输入 webpack:
 
  
 
  
打开index.html：
 
  
 
  
成功！
 
  
2.热加载
 我们在上篇webpack中讲了一下热加载，现在我们运用到这个项目上来。 
  
我们在package.json中已经依赖了webpakc-dev-server模块，所以我们直接使用
 
  
 
  
$webpack-dev-server
看到启动成功 
  
 
  

 我们修改代码试试：
 
  
index.vue:
 
  
 
  


 
  
 
  
发现不管是刷新页面还是重启服务都没用。
 
  
那我们试试打包：
 
  

 
   
  
 
  
成功了？？？？？？？？
 
  
我们知道打包方式是生成文件到磁盘中 ，而热加载方式是生成文件到内存中。
 
  
查下官网关于Webpack-dev-server,发现配置是这样的
 
  
 
  
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:  
  
 
  
 //webpack.config.js
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']
  } 
}
 
  
 再启动一次 
  
 
  
$webpack-dev-server
 
  
 
  
访问http://localhost:8080/webpack-dev-server/
 修改index.vue 
  
 
  


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


 
  
 
  
3.vue-cli