vue-cli中配置webpack系列文章五 ------ webpack.base.conf.js

pinecone 发布于2019-08-26 13:50 / 3005人阅读

摘要：获取根目录定义入口文件输出路径输出文件名称为中定义的值静态资源路径判断目前所处的环境在开发环境下，路径为根目录在生产环境下，路径为根目录下的文件夹自动解析拓展，可以在引用文件的时候不用写后缀配置别名，避免在结构嵌套过深的情况下出现这种写法

webpack.base.conf.js

  var path = require("path")
  var utils = require("./utils")
  var config = require("../config")
  var vueLoaderConfig = require("./vue-loader.conf")
  // 获取根目录
  function resolve(dir) {
    return path.join(__dirname, "..", dir)
  }
  module.exports = {
    // 定义入口文件
    entry: {
      app: "./src/main.js"
    },
    output: {
      // 输出路径
      path: config.build.assetsRoot,
      // 输出文件名称（name为entry中定义的key值）
      filename: "[name].js",
      // 静态资源路径（判断目前所处的环境）
      // 在开发环境下，路径为根目录
      // 在生产环境下，路径为根目录下的static文件夹
      publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    resolve: {
      // 自动解析拓展，可以在引用文件的时候不用写后缀
      extensions: [".js", ".vue", ".json"],
      // 配置别名，避免在结构嵌套过深的情况下出现../../../../xxx这种写法
      alias: {
        "vue$": "vue/dist/vue.esm.js",
        "@": resolve("src")
      }
    },
    module: {
      // 配置不同模块处理规则
      rules: [{
        test: /.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig
      }, {
        test: /.js$/,
        loader: "babel-loader",
        include: [resolve("src"), resolve("test")]
      }, {
        // 对于图片资源，当文件体积小于10kb时，将其生成为base64，直接插入html中
        // 当大于10kb时，将图片名称进行按照命名规则进行更改
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      }, {
        // 字体资源打包规则，与图片资源相同
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
        }
      }]
    }
  }

海外云主机私有云 webpack cdn配置 webpack配置cdn webpack常用配置项如何批量替换wordpress文章中的文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109650.html

vue-cli中配置webpack系列文章六 ------ webpack.dev.conf.js

摘要：将热重载的相关配置放入的每一项中，达到每一个文件都可以实现热重载的目的这样中选项就变成了如下调用方法，将基础设置与开发设置进行合并的作用类似于少则添加，同则覆盖在开发环境下生成，便于调试但是官方说的相对路径有一个，所以暂 webpack.dev.conf.js var utils = require(./utils) var webpack = require(webpack)...

dreamtecher 2019-08-26 13:50 评论0 收藏0
vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0
vue-cli中配置webpack系列文章八 ------ 工程常用配置

摘要：根据模板插入等生成最终生成的存放路径，相对于的路径模板路径插入的位置，路径设置属性，属性值是所在的路径。配置后，在使用时将不再需要和进行引入，直接使用即可。一 webpack.base.conf.js 1. entry 为入口文件 1.1 在此可以绑定 babel 垫片处理ie兼容 1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置 2. resol...

netScorpion 2019-08-26 13:51 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
vue-cli配置预编译

摘要：转载文章公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录一下。 (转载文章)公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，so捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录...

KnewOne 2019-08-22 18:13 评论0 收藏0