【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 ...
随机推荐
- POJ 2864
#include <iostream> #define MAXN 600 using namespace std; int _m[MAXN][MAXN]; int main() { //f ...
- 七、Framework类库
1.Framework类库简介 .Net Framework类库包含Framework类库(Framework Class Library,FCL).FCL是一组DLL程序集的统称,其中含有数千个类型 ...
- 如何用Python来处理数据表的长宽转换(图文详解)
不多说,直接上干货! 很多地方都需用到这个知识点,比如Tableau里. 通常可以采取如python 和 r来作为数据处理的前期. Tableau学习系列之Tableau如何通过数据透视表方式读取 ...
- Element ui tree结合Vue使用遇到的一些问题(一)
下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...
- Mysql的select in会自动过滤重复的数据
默认使用 SELECT 语句: 当加上in范围后,结果如下图: in范围内的数据,如果有重复的,只会选择第一个数据. 所以如果不是直接使用SQL语句来查询,而是在代码中来查询时,记得使用 distin ...
- Go常量与运算符
常量的定义 常量的值在编译时就已经确定 常量的定义格式与变量基本相同 等号右侧必须是常量或者常量表达式 常量表达式中的函数必须是内置函数 package main import ( "fmt ...
- 逆向工程-对native层的一次简单逆向实践
关注一款app很久了,这款app为了防止别人逆向破解拉取数据做了很多工作: 防止别人修改apk包,执行关键动作时对dex文件进行md5验证: 防止用户调用接口批量拉数据,对返回的web网页里个人信息进 ...
- [转]webpack4.0.1安装问题和webpack.config.js的配置变化
本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...
- ASP.NET编辑与更新数据(非GridView控件实现)
Insus.NET在实现<ASP.NET开发,从二层至三层,至面向对象 (5)>http://www.cnblogs.com/insus/p/3880606.html 中,没有把数据编辑与 ...
- 自定义MVC的Helper扩展方法
记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如:http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblogs ...