【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 ...
随机推荐
- 基于alpine用dockerfile创建的tomcat镜像
1.下载alpine镜像 [root@docker43 ~]# docker pull alpine Using default tag: latest Trying to pull reposito ...
- POJ 2562
#include<iostream> #include<algorithm> #define MAXN 15 using namespace std; //int rec[MA ...
- 3DMax——基础
1.首次打开3DMAX设置单位: 自定义→单位设置→①系统单位设置→1单位=1.0毫米:②公制→毫米 注:室内单位为毫米,室外单位为米 2.从CAD导出可以导入到3DMAX的文件: 选中要导出的部分→ ...
- Redis学习系列六ZSet(有序列表)及Redis数据结构的过期
一.简介 ZSet可以说是Redis中最有趣的数据结构了,因为他兼具了Hash集合和Set的双重特性,也是用的最多的,保证了value值的唯一性的同时,,同时又保证了高性能,最主要的是还可以给每个Va ...
- Android _关于fragment切换重新加载的解决分享给大家
在项目中需要进行Fragment的切换,一直都是用replace()方法来替换Fragment但是,这样会有一个问题 ,应该很多朋友都遇到过:每次切换的时候,Fragment都会重新实例化,也就是运行 ...
- php -- 正则替换
----- 019-regex_replace.php ----- <!DOCTYPE html> <html> <head> <meta http-equi ...
- mysql 主键和唯一索引的区别
主键是一种约束,唯一索引是一种索引,两者在本质上是不同的. 主键创建后一定包含一个唯一性索引,唯一性索引并不一定就是主键. 唯一性索引列允许空值,而主键列不允许为空值. 主键列在创建时,已经默认为非空 ...
- 逆向工程-对native层的一次简单逆向实践
关注一款app很久了,这款app为了防止别人逆向破解拉取数据做了很多工作: 防止别人修改apk包,执行关键动作时对dex文件进行md5验证: 防止用户调用接口批量拉数据,对返回的web网页里个人信息进 ...
- ActiveMQ专题2: 持久化
AMQ的持久化问题 前言 前面一篇AMQ专题中,我们发现对于Topic这种类型的消息,即使将deliveryMode设置为持久化,只要生产者在消费者之前启动.消息生产者发布的消息还是会丢失.这是符 ...
- ffplay源码分析2-数据结构
ffplay是FFmpeg工程自带的简单播放器,使用FFmpeg提供的解码器和SDL库进行视频播放.本文基于FFmpeg工程4.1版本进行分析,其中ffplay源码清单如下: https://gith ...