码迷,mamicode.com
首页 > Web开发 > 详细

webpack打包vue配置

时间:2017-07-22 16:57:43      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:ttf   css   test   name   输出   plugins   pre   var   require   

/* 引入操作路径模块和webpack */
var path = require(‘path‘);
var webpack = require(‘webpack‘);

module.exports = {
  /* 输入文件 */
  entry: {
    index:‘./src/main.js‘
  },
  output: {
    /* 输出目录,没有则新建 */
    path: path.resolve(__dirname, ‘./dist‘),
    /* 静态目录,可以直接从这里取文件 */
    publicPath: ‘/dist/‘,
    /* 文件名 */
    filename: ‘build.js‘
  },
  module: {
    rules: [
      /* 用来解析vue后缀的文件 */
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘
      },
      /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
      {
        test: /\.js$/,
        loader: ‘babel-loader‘,
        /* 排除模块安装目录的文件 */
        exclude: /node_modules/
      },
      /*解析图片url*/
      {
        test: /\.(png|jpg|gif)$/,
        loader:‘url-loader?limit=8192‘
      },
      /*解析css*/
      {
        test: /\.css$/,
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)$/,
        loader: ‘url-loader‘
      }
    ]
  },
  resolve: {
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘
    }
  },
  plugins : [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

  

webpack打包vue配置

标签:ttf   css   test   name   输出   plugins   pre   var   require   

原文地址:http://www.cnblogs.com/huangtonghui/p/7221441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!