找了很多 vue+webpack 构建的文章 感觉这个还是很不错的，简单易懂还有代码实例。


源码链接：http://git.oschina.net/hwhao/webpack_vue_tutorials

原文链接: https://github.com/varHarrie/Dawn-Blossoms/issues/7

提示: 代码没有敲错。完全可以搭好的！ 感觉可以的给作者一个星。

推荐vue项目目录结构：

  • config          全局变量

  • dist            编译后的项目代码

  • src             项目源码

    • modules     vuex模块

    • types.js    type管理

    • index.js    路由对象

    • routes.js   路由配置

    • apis          api封装

    • components    Vue组件

    • libs          js工具类

    • router        路由

    • store         Vuex的store

    • styles        css样式

    • views         页面组件

    • main.js       vue入口文件

  • webpack.config  Webpack各种环境的配置文件

  • package.json

第一步：初始化项目

  1. 所有项目的第一步当然是：创建项目文件夹，然后使用npm init -y创建package.json

  2. 项目根目录下建立src和dist文件夹，分别用来存放项目源码和webpack编译后的代码

第二步：入口文件

  1. 在根目录下直接建立一个index.html，作为页面的入口文件




  
  Demo


  `message`
    

  1. 在src下建立一个main.js，作为Vue的入口文件

// import...from的语法是ES6的，需要用到babel，后面再说// require的语法是Commonjs的，webpack已经实现了，可以直接使用const Vue = require('vue')new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

  1. 安装模块

安装Vue：npm install vue@1 --save
安装Webpack： npm install webpack --save-dev

  1. 使用webpack编译打包

除非在全局安装webpack，使用本地安装需要在package.json的script加入运行脚本，添加之后package.json如下：

{  "name": "step2",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "dev": "webpack src/main.js dist/main.js"  // <---添加这句
  },  "keywords": [],  "author": "",  "license": "ISC",  "dependencies": {    "vue": "^1.0.28"
  },  "devDependencies": {    "webpack": "^1.14.0"
  }
}

运行npm run dev，再用浏览器打开index.html就能看到效果了：

Hello Vue.js!

第三步：编写webpack配置文件

上一步中直接使用webpack运行脚本webpack [入口文件] [出口文件]，显然对于后期添加webpack插件和不同环境的配置是不行的。

  1. 在项目根目录下创建webpack.config文件夹专门用于存放webpack的配置文件

  2. 为了让配置文件不同的编译环境中能够复用（例如loaders的配置，不管在开发环境还是生产环境肯定都是一样的），在webpack.confg中首先创建一个base.js文件：

const path = require('path')const root = path.resolve(__dirname, '..') // 项目的根目录绝对路径module.exports = {
  entry: path.join(root, 'src/main.js'),  // 入口文件路径
  output: {
    path: path.join(root, 'dist'),  // 出口目录
    filename: 'main.js'  // 出口文件名
  }
}

上面这段配置就实现了webpack src/main.js dist/main.js的功能，还可以额外拓展一下，变成：

const path = require('path')const root = path.resolve(__dirname, '..') // 项目的根目录绝对路径module.exports = {
  entry: path.join(root, 'src/main.js'),  // 入口文件路径
  output: {
    path: path.join(root, 'dist'),  // 出口目录
    filename: 'main.js'  // 出口文件名
  },
  resolve: {
    alias: { // 配置目录别名
      // 在任意目录下require('components/example') 相当于require('项目根目录/src/components/example')
      components: path.join(root, 'src/components'),
      views: path.join(root, 'src/views'),
      styles: path.join(root, 'src/styles'),
      store: path.join(root, 'src/store')
    },
    extensions: ['', '.js', '.vue'], // 引用js和vue文件可以省略后缀名
    fallback: [path.join(root, 'node_modules')] // 找不到的模块会尝试在这个数组的目录里面再寻找
  },
  resolveLoader: {
    fallback: [path.join(root, 'node_modules')] // 找不到的loader模块会尝试在这个数组的目录里面再寻找
  },
  module: { // 配置loader
    loaders: [
      {test: /\.vue$/, loader: 'vue'}, // 所有.vue结尾的文件，使用vue-loader
      {test: /\.js$/, loader: 'babel', exclude: /node_modules/} // .js文件使用babel-loader，切记排除node_modules目录
    ]
  }
}

根目录下添加.babelrc用于配置babel：

{  "presets": ["es2015"]
}

使用了vue-loader和babel-loader需要安装包：

npm install --save-dev vue-loader@8 babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 css-loader vue-style-loader vue-hot-reload-api@1 vue-html-loader

  1. 在webpack.confg创建dev.js文件：

const path = require('path')const webpack = require('webpack')const merge = require('webpack-merge')const baseConfig = require('./base')const root = path.resolve(__dirname, '..')module.exports = merge(baseConfig, {})

上面的代码仅仅是导出了跟base.js一模一样的配置，下面我们添加更多用于dev（开发环境）的配置。

webpack-merge 用于合并两个配置文件，需要安装

npm install --save-dev webpack-merge

  1. 使用webpack dev server，开启一个小型服务器，不需要再手动打开index.html进行调试了

修改配置文件为：

module.exports = merge(baseConfig, {
  devServer: {
    historyApiFallback: true, // 404的页面会自动跳转到/页面
    inline: true, // 文件改变自动刷新页面
    progress: true, // 显示编译进度
    colors: true, // 使用颜色输出
    port: 3000, // 服务器端口
  },
  devtool: 'source-map' // 用于标记编译后的文件与编译前的文件对应位置，便于调试})

  1. 添加热替换配置，每次改动文件不会再整个页面都刷新

安装webpack-dev-server:npm install --save-dev webpack-dev-server

module.exports = merge(baseConfig, {
  entry: [    'webpack/hot/dev-server', // 热替换处理入口文件
    path.join(root, 'src/index.js')
  ],
  devServer: { /* 同上 */},
  plugins: [    new webpack.HotModuleReplacementPlugin() // 添加热替换插件
  ]
}

  1. 使用HtmlWebpackPlugin，实现js入口文件自动注入

module.exports = merge(baseConfig, {
  entry: [ /* 同上 */ ],
  devServer: { /* 同上 */ },
  plugins: [    new webpack.HotModuleReplacementPlugin(),    new HtmlWebpackPlugin({
      template: path.join(root, 'index.html'), // 模板文件
      inject: 'body' // js的script注入到body底部
    })
  ]
}

最后修改后完整的dev.js请查看源码

这里的HotModuleReplacementPlugin是webpack内置的插件，不需要安装

但HtmlWebpackPlugin需要自行安装：

npm install --save-dev html-webpack-plugin

在文件头中引入const HtmlWebpackPlugin = require('html-webpack-plugin')

修改index.html，去掉入口文件的引入：




  
  Demo


  `message`