【webpack】webpack.base.conf.js基础配置
var path = require('path') // node路径模块 var utils = require('./utils') // 对vue-loader对于css预编译一些提取的工具模块,因为对于个人开发而言,在里面提供了,sass,less,stylus,possCss等一些列预编译解析的loader var config = require('../config') // 对开发环境和生产环境的一系列不同参数的,路径等配置 var vueLoaderConfig = require('./vue-loader.conf') // 基础生产环境和开发环境对vue-loader进行的配置
function resolve (dir) {
return path.join(__dirname, '..', dir)
} 封装函数,进行传参,获取绝对路径,方便对import时引入地址的填写
path.join :对多个字符串进行拼接
entry: {
app: './src/main.js'
},
打包的入口js文件
output: {
path: config.build.assetsRoot, (config.build.assetsRoot===path.resolve(_dirname,'../dist')作者把想打包出来的文件领放在根目录下的dist目录下)
filename: '[name].js', 用来打包出的文件名,因为会打包出来的文件是三个文件,一个是自己的源代码文件,一个是runtime文件,一个是ventor文件
publicPath: process.env.NODE_ENV === 'production' 静态文件访问的路径,根据静态文件的loader进行拼接配置,当进行环境是生产环境的话,我们就用config文件中的config.build.assetsPublicPath这个属性,如果是生产环境,则用config.dev.assetsPulicPath
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
output是我们输文件输出的路径
resolve: {
extensions: ['.js', '.vue', '.json'],是对模块的后缀进行解析,当我们引入自己写的模块的时候,没有带js后缀,那文件会不会识别,本质上不会识别,但是有了这个配置,会先对.js后缀进行匹配,没有再匹配.vue,没有在匹配.json,还是没有找到的话,则会报错
alias: {
'vue$': 'vue/dist/vue.esm.js', 配置别名,如果你在一个很深的文件引入其他文件中有一个很深的文件,我们就用@来代替src
'@': resolve('src')
}
},
relove是用来对模块进行解析,就是所谓的Libary第三方库
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
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]')
}
}
]
}
test:用来解析所有后缀为*的文件
loader:用什么Npm的形式的loader去解析
include:代表我们解析的文件只包含那些东西
options:是对解析文件参数配置,对于url-loader来说limit1000代表当小时1000kb的文件我们则可以砖面base64,name对输出的内容进行地址转换
对解析文件的参数配置
【webpack】webpack.base.conf.js基础配置的更多相关文章
- 手撕vue-cli配置——webpack.base.conf.js篇
在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到: 'use strict' //引入前一 ...
- vue-cli脚手架npm相关文件解读(1)webpack.base.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...
- vue-cli脚手架之webpack.base.conf.js
webpack相关的重要配置文件将在这一节给出.webpack水很深啊^o^,在此先弄清楚原配文件内容的含义,后续可以自己根据实际情况配置. webpack.base.conf.js:配置vue开发环 ...
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
转载自:http://www.cnblogs.com/ye-hcj/p/7082620.html webpack.base.conf.js配置文件// 引入nodejs路径模块 var path = ...
- vue-cli下面的config/index.js注解 webpack.base.conf.js注解
config/indexjs详解上代码: 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io ...
- vue - webpack.base.conf.js
描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 'use strict' // 路径 ...
- 【webpack4.0】---base.config.js基本配置(五)
一.创建项目初始化 1.初始化项目npm init -y 2.创建 src (用来存放开发环境的代码)文件夹. config (用来存放webpack的配置项)文件夹 3.安装webpack We ...
- webpack.base.conf.js
var path = require('path')var utils = require('./utils')var config = require('../config')var vueLoad ...
随机推荐
- typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 连接 postgresql 数据库
接上一篇,这里使用 sequelize 来连接 postgresql 数据库 1.安装 sequelize,数据库驱动 pg yarn add sequelize sequelize-typescri ...
- ubuntu升级pip后, ImportError: cannot import name ‘main‘
场景描述: 原先pip安装完成之后,一直没有更新版本,原pip版本为8.1.1,今天安装python 包pysftp的时候,提示需要升级pip到(pip 10.0.1); 于是乎,直接手到擒来,终端命 ...
- odoo开发笔记 -- 视图继承扩展
参考: http://www.jeffzhang.cn/Odoo-Notes-2/ http://blog.csdn.net/zhangfeng1133/article/details/4693517 ...
- 下载一个新的app之后,如果分析、鉴赏?
一直对新的事物还是比较好奇的,所以希望以后每隔几天就下载一个app,去体验,但是之前体验的时候,都是大概看看功能.竞品分析.流畅度等等,却没有一个完整的方法论,所以,这篇文章就是总结一下更为具体的方法 ...
- PHP使用APC获取上传文件进度
今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...
- salesforce 零基础学习(七十)使用jquery tree实现树形结构模式
项目中UI需要用到树形结构显示内容,后来尽管不需要做了,不过还是自己做着玩玩,mark一下,免得以后项目中用到. 实现树形结构在此使用的是jquery的dynatree.js.关于dynatree的使 ...
- RocketMQ多Master多Slave模式部署
每个 Master 配置一个 Slave,有多对Master-Slave,HA采用同步双写方式,主备都写成功,向应用返回成功. 优点:数据与服务都无单点,Master宕机情况下,消息无延迟,服务可用性 ...
- js拦截全局ajax请求
你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有a ...
- MYSQL中常用的强制性操作(例如强制索引)
mysql常用的hint 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的 ...
- SQL 语句语法简介(一)
语句分类 SQL 命令一般分为三类:DQL.DML.DDL. 一.DDL语句. 1.1建表语句 CREATE TABLE table_name( col01_name data_type, col02 ...