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 developmentconfig.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 = trueconfig.devtool = SOURCE_MAP ? '#source-map' : false// generate loader string to be used with extract text pluginfunction 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要简单不少

作者：桑尼君
链接：https://www.jianshu.com/p/877f701f0ec0