Vue 入门系列之手把手教你搭Webpack

通过Webpack新手入门 大家应该对Webpack有了简单的了解了, 这篇文章将结合真实的开发场景一步一步搭建Webpack开发环境与生产环境

项目整体结构大概如下

项目结构

看过Webpack新手入门 知道一个项目通常会有一个 webpack.config.js 的文件来做配置，当然也可以自由命名配置文件，在输出是 通过 --config 命令指定就好

所以这里，我们设定了3个配置文件 webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js

Webpack.base

Base 文件配有一些基础要素包括，会和 通常的webapck.config.js类似

• enrty output

entry: {
   app: './src/main.js'
},
output: {
  path: path.resolve(__dirname, '../dist/static'),
  publicPath: '/dist/static/',
  filename: '[name].js'
},

以上很好理解，不做赘述

• resolve

resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      'src'        : path.resolve(__dirname, '../src'),
      'api'        : path.resolve(__dirname, '../src/api'),
      'route'      : path.resolve(__dirname, '../src/route'),
      'filters'    : path.resolve(__dirname, '../src/filters'),
      'directive'  : path.resolve(__dirname, '../src/directive'),
      'views'      : path.resolve(__dirname, '../src/views'),
      'components' : path.resolve(__dirname, '../src/components'),
      'style'      : path.resolve(__dirname, '../src/style'),
      'static'     : path.resolve(__dirname, '../static'),
      'fullCalendar': path.resolve(__dirname, '../src/fullCalendar'),
    }
  },

extensions : 我们预定义了 .js 和 .vue 的扩展，这样在引用 一个 hello.js 文件时 我们只需要 import Hello from '/path/to/directory/hello' 就能够做到

alias : 一些路径的假名，这样我们就可节省大量时间去计算文件与文件之间的嵌套关系了

• module.loaders

module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash:6]'
        }
      },
      {
        test   : /\.scss$/,
        loader : 'style-loader!css-loader!sass-loader'
      },
      {
        test:/\.css$/,
        loader:'style!css'
      },
      {
        test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader : 'file-loader?name=[name]_[hash:6].[ext]'
      }
    ]
  }

loaders : 用以识别不同的文件类型，比如 常用的

代码文件 .vue .js
数据文件 .json
图片文件.(png|jpg|gif|svg)
样式文件.(css|scss)
字体文件.(tff|eot|svg|woff)

他们可能对应不同的loader

• 其他

vue: {
    autoprefixer: {
      browsers: ['> 1%']
    },
    loaders: {
      scss: 'style!css!sass',
      js: 'babel'
    }
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  }

针对 Vue 我们需要做些特殊处理，比如 为了保证css的浏览器兼容性加入了 autoprefixer 以及针对 style 和 script 部分的不同 loader 指认

针对 Babel 的配置，可参考 Babel官网

Webpack.dev

这个配置将针对我们本机开发时使用，全文如下

var webpack           = require('webpack')
var config            = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')

// eval-source-map is faster for development
config.devtool = '#eval-source-map'

config.output.publicPath = '/'

config.plugins = (config.plugins || []).concat([
  // new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.NoErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject : true,
    minify: {
      removeComments: true
    }
  })
])

config.devServer = {
  port : 8080,
  // noInfo : true,
  // contentBase : '/',
  historyApiFallback: true
}

module.exports = config

• devtool : 指定sourceMap类型 方便源码定位

• plugins : 一些 额外的插件，不是必须的

  • HtmlWebpackPlugin : 以现有html为模板去生成新的html以及相应配置 参考官方

• devServer : webpack-dev-server 的相关配置了 参考官方

  • port : 指定好端口

  • historyApiFallback : 如果使用vue-router 的话一定需要设为 true

Webpack.prod

终于到最后了，这个文件将定义打包好的生成文件

 var webpack           = require('webpack')
var config            = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')

config.output.filename = '[name].[chunkhash:6].js'
config.output.chunkFilename = '[id].[chunkhash:6].js'

var SOURCE_MAP = true

config.devtool = SOURCE_MAP ? '#source-map' : false

// generate loader string to be used with extract text plugin
function generateExtractLoaders (loaders) {
  return loaders.map(function (loader) {
    return loader + '-loader' + (SOURCE_MAP ? '?sourceMap' : '')
  }).join('!')
}

config.vue.loaders = {
  js: 'babel',
  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
  css: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css'])),
  scss: ExtractTextPlugin.extract('vue-style-loader', generateExtractLoaders(['css', 'sass']))
}

config.plugins = (config.plugins || []).concat([
  // http://vuejs.github.io/vue-loader/workflow/production.html
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),
  new webpack.optimize.OccurenceOrderPlugin(),
  // extract css into its own file
  new ExtractTextPlugin('[name].[contenthash:6].css'),
  // generate dist index.html with correct asset hash for caching.
  // you can customize output by editing /build/index.template.html
  // see https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
    filename: '../index.html',
    template: 'index.html',
    inject : true,
    minify: {
      removeComments: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    }
  })
])

module.exports = config

之前重复的配置我不再赘述了

• output : 注意到我给filename 重新定义了 chunkhash，这是为了避免客户端js 被缓存的问题以及将生产文件分开打包

• ExtractTextPlugin 针对 vue文件里的样式 单独拆分，这样他们会被合并到css文件里去

• UglifyJsPlugin 对js代码的压缩

脚本命令

在package.json文件中我们定义了如下两条命令

 "scripts": {
    "dev": "webpack-dev-server --config config/webpack.dev.conf.js --hot --inline",
    "build": "webpack --config config/webpack.prod.conf.js"
  },

• npm run dev : 开发时候使用。针对上面第一条 他会跑起 webpack-dev-server 的服务器 去 http://localhost:8080/ 访问

• npm run build: 打包项目 发到自己的项目服务器上配合相应的 apache | nginx 就可以外网访问啦

完结

就这样一步一步我们配好了针对vue的webpack配置，比Vue官方的CLI要简单不少，如果有疑问，错误欢迎在评论留言，如果你觉得有用欢迎点赞，打赏哦~