详解用webpack2.0构建vue2.0超详细精简版

下面是详解“用webpack2.0构建vue2.0超详细精简版”的完整攻略。

一、安装依赖

在开始构建项目前，我们需要先安装相关依赖，执行以下命令：

npm i webpack webpack-dev-server vue vue-loader vue-template-compiler css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-env babel-plugin-transform-object-rest-spread --save-dev

二、配置webpack.config.js

接下来我们需要配置webpack，新建webpack.config.js文件，并完成以下配置：

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

三、配置.babelrc

由于我们使用了babel来处理ES6语法，需要在项目根目录添加.babelrc文件，并完成以下配置：

{
  "presets": ["env"],
  "plugins": ["transform-object-rest-spread"]
}

四、创建Vue实例和组件

接下来我们需要创建Vue实例和组件，新建src目录，并在其中新建index.js和App.vue文件。

1、index.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

2、App.vue

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue.js',
      imageUrl: './img/logo.png'
    }
  }
}
</script>

<style>
.app {
  text-align: center;
}
</style>

五、启动项目

最后，在命令行中执行以下命令，启动项目：

webpack-dev-server

打开浏览器，在地址栏输入http://localhost:8080，你应该能看到一个页面，上面有”Hello Vue.js”和Vue官方的logo图标。

以上是“用webpack2.0构建vue2.0超详细精简版”的完整攻略。下面展示两个示例，以更好的理解整个流程。

示例1：处理CSS文件

假设我们在App.vue中引入了一个CSS文件，代码如下：

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue.js',
      imageUrl: './img/logo.png'
    }
  }
}
</script>

<style src="./style.css"></style>

那么我们需要在webpack.config.js中添加一个CSS文件的loader，即可正确处理CSS文件，代码如下：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

示例2：处理图片和字体文件

假设我们在App.vue中引入了一个图片和一个字体文件，代码如下：

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <img :src="imageUrl">
    <span class="iconfont icon-heart"></span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue.js',
      imageUrl: './img/logo.png'
    }
  }
}
</script>

<style>
@font-face {
  font-family: 'iconfont';
  src: url('./font/iconfont.eot'); /* IE9 */
  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./font/iconfont.woff') format('woff'), /* chrome、firefox */
  url('./font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  url('./font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-heart:before {
  content: "\e617";
}
</style>

那么我们需要在webpack.config.js中添加一个图片和字体的loader，即可正确处理图片和字体文件，代码如下：

{
  test: /\.(png|jpg|gif|svg)$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 8192
    }
  }]
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: '[name].[ext]?[hash]'
  }
}

以上就是两个示例，相信能更好的帮助你理解整个流程。