webpack打包vue配置

/* 引入操作路径模块和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"
    })
  ]
}

  

时间: 2024-11-02 00:58:09

webpack打包vue配置的相关文章

webpack打包vue -->简易讲解

### 1. 测试环境: 推荐这篇文章:讲的很细致 https://www.cnblogs.com/lhweb15/p/5660609.html #### 1. webpack.config.js自行安装 ```javascript { "name": "vuetest", "version": "1.0.0", "description": "", "main":

关于webpack 打包vue项目的2中路由配置方式

首先,2种都是引入配置好的router里面的index.js import Vue from 'vue'import Router from 'vue-router'import login from '@/components/login' Vue.use(Router) 1.第一种写法export default new Router({  routes: [    {      path: '/login',      component: login    }   ]}) 2.第二种写法

使用webpack打包Vue工程

本篇文章就是介绍如何使用webpack构建前端工程. 目标 本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出如下图的效果.仅仅搭一个框架,会用上很多插件和加载器. 环境准备 主要是一些全局的nodejs包 Nodejs npm webpack less ? 1 2 sudo npm install webpack -g // -g 代表全局安装webpack,调出命令行即可使用webpack命令 sudo npm ins

如何做到在webpack打包vue项目后,在外部动态修改配置文件

在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO NO,让我们一起来探索如何解决这个问题吧. 首先我们需要借助一个插件 generate-asset-webpack-plugin npm install generate-asset-webpack-plugin --save-dev 其次在build文件夹下建立一个generate-asset.co

16.如何做到webpack打包vue项目后,可以修改配置文件

问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要会到前端源码,url后,在重新npm run build,然后再把整个dist再重新传到前端服务器,才可以. 解决方法: 用了generate-asset-webpack-plugin 这个插件,在webpack.prod.conf.js中去生

解决webpack打包vue项目后,部署完成后,刷新页面页面404

1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷新页面页面不会丢失    实现原理写一个window事件我监听url的变化,那我就能实先路由,那样我就可以根据url的变化,来通过ajax请求参数来渲染页面,一个url对应一个页面,就不会重复.window.addEventListener(‘hashchange‘,function(){self.

如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法

http://www.cnblogs.com/caimuqing/p/7065694.html 问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awsome的文件是存放在static/fonts/下的,而访问的时候static/css/static/fonts/ 原因是: build > webpack.base.conf.js 里面loader的设置

【vue】饿了么项目-使用webpack打包项目

1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的"node build/build.js"脚本 build完成后显示 进入项目文件夹,找到dist文件夹,这些是打包后产生的文件 2.webpack打包过程中会将css和js文件单独提取出来,且会根据path存放进相应的文件夹下,形成如上图的根目录,文件名是根据内容产生的哈希值,文件内容改变

webpack构建vue项目(配置篇)

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入