vue-cli脚手架之webpack.base.conf.js
webpack相关的重要配置文件将在这一节给出。webpack水很深啊^o^,在此先弄清楚原配文件内容的含义,后续可以自己根据实际情况配置。
webpack.base.conf.js:配置vue开发环境的webpack配置,处理各种文件(js啊、css啊、html啊...)
'use strict'//js严格模式执行
const path = require('path')//引入node.js路径模块
const utils = require('./utils')//引入utils工具模块,主要处理css-loader和vue-style-loader
const config = require('../config')//引入config文件夹下的index.js文件
const vueLoaderConfig = require('./vue-loader.conf')//引入vue-loader工具模块 function resolve (dir) {//返回当前目录的平行目录的路径
return path.join(__dirname, '..', dir)
} module.exports = {
context: path.resolve(__dirname, '../'),
entry: {//输入
app: './src/main.js'//入口文件为main.js
},
output: {//输出
path: config.build.assetsRoot,//打包后文件输出路径,看看自己的index.js中build配置中的assetsRoot是啥目录
filename: '[name].js',//输出文件名称默认使用原名
publicPath: process.env.NODE_ENV === 'production'//真正的文件引用路径,请看自己的index.js中build配置中写的啥
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {//决定要做的事情
extensions: ['.js', '.vue', '.json'],//省略扩展名,也就是说当使用.js .vue .json文件导入可以省略后缀名
alias: {
'vue$': 'vue/dist/vue.esm.js',//$符号指精确匹配,路径和文件名要详细
'@': resolve('src'),//resolve('src‘)//resolve('src')指的是项目根目录中的src文件夹目录,导入文件的时候路径可以这样简写 import somejs from "@/some.js"就可以导入指定文件
}
},
//用来解析不同模块
module: {
rules: [
{
test: /\.vue$/,//正则表达式,表示当前loader能检测.vue类型的文件(分析这个正则:/标记正则表达式的开始和结束,指的是在开始和结尾处哦,否则要使用/就得转义\/;\.表示.,此处的\将.标记为原意字符;$是正则表达式的结束?这个我不知道...)
loader: 'vue-loader',//对vue文件使用vue-loader,该loader是vue单文件组件的实现核心,解析.vue文件
options: vueLoaderConfig//将vueLoaderConfig当做参数传递给vue-loader,解析css相关文件
},
{
test: /\.js$/,
loader: 'babel-loader',//对js文件使用babel-loader转码,该插件用来解析es6等代码
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]//指明src文件夹 test文件夹 client文件夹下的js文件要使用该loader
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,//这些格式结尾的图片文件
loader: 'url-loader',//图片文件使用url-loader插件,将图片转为base64格式字符串
options: {
limit: 10000,//10000个字节以下的文件才用来转为dataUrl
name: utils.assetsPath('img/[name].[hash:7].[ext]')//超过10000字节的图片,就按照制定规则设置生成的图片名称,可以看到用了7位hash码来标记,.ext文件是一种索引式文件系统
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//音频 视频类文件
loader: 'url-loader',//也是用url-loader
options: {
limit: 10000,//10000个字节以下的文件才进行转换
name: utils.assetsPath('media/[name].[hash:7].[ext]')//这个name到底是给谁起的啊喂,给超过limit字节限制的文件起的
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//处理字体相关
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
/*添加sass开始*/
{
test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,//这个可以在vue组件中用sass scss等...
loaders:['style','css','sass'],
}
/*添加sass结束*/
]
},
node: {//一个对象,每个属性都是node.js全局变量或模块的名称,value为empty表示提供空对象
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,//false表示什么都不提供,话说参数setImmediate表示异步递归???需要查阅node文档了
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
vue-cli脚手架之webpack.base.conf.js的更多相关文章
- vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...
- 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脚手架build目录中的webpack.base.conf.js配置文件
转载自:http://www.cnblogs.com/ye-hcj/p/7082620.html webpack.base.conf.js配置文件// 引入nodejs路径模块 var path = ...
- vue -- 脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- vue-cli脚手架之webpack.prod.conf.js
webpack.prod.conf.js 生产环境配置文件: 'use strict'//js严格模式执行 const path = require('path')//这个模块是发布到NPM注册中心的 ...
- 手撕vue-cli配置——webpack.base.conf.js篇
在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到: 'use strict' //引入前一 ...
- 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.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue-cli脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
随机推荐
- Python selenium + Firefox启动浏览器
Python selenium 的运用 from selenium import webdriver # from selenium.webdriver.firefox.firefox_profile ...
- navicat连接linux系统中mysql-错误:10038
输入 命令 netstat -anp(查看所有的进程和端口使用情况) (注:Local Address一列中: 0.0.0.0 表示监听本地所有ip地址,其他电脑是可以访问的,并且修改ip不受影响. ...
- Mac 安装微软雅黑字体
https://www.jianshu.com/p/d8c34fff3483 1.找一台Windows电脑,打开字体文件夹C:\Windows\Fonts. 2.搜索"Calibri.微软雅 ...
- 聚簇索引(clustered index )和非聚簇索引(secondary index)的区别
这两个名字虽然都叫做索引,但这并不是一种单独的索引类型,而是一种数据存储方式.对于聚簇索引存储来说,行数据和主键B+树存储在一起,辅助键B+树只存储辅助键和主键,主键和非主键B+树几乎是两种类型的树. ...
- 1ink 与 @import 的区别
1ink与@import的区别 目录 1ink与@import的区别 差别1:归属关系的差别 差别2:加载顺序的差别 差别3:兼容性的差别 差别4:使用dom控制样式时的差别 1ink与@import ...
- Re:从零开始的MySQL入门学习
Linux作为操作系统,Apache作为Web服务器,MySQL作为数据库,PHP作为服务器端脚本解释器.由于这四个软件都是免费或开放式源码软件,因此使用这种不用花一分钱(人工成本除外)就可以建立起一 ...
- 音频标签化2:youtube-8m项目的训练、评估与测试
之前小程介绍了使用机器学习的办法来解决"音频标签化"的问题,并且提到了训练样本audioset跟youtube-8m的dataset,而训练模型上也提到了youtube-8m的模型 ...
- 从完整备份恢复单个innodb表
现在大多数同学在线上采取的备份策略都是xtrabackup全备+binlog备份,那么当某天某张表意外的删除那么如何从xtrabackup全备中恢复呢?从mysql 5.6版本开始,支持可移动表空间( ...
- #10 Python字符串
前言 通过上一节可知,Python6个序列的内置类型中,最常见的是列表和元组,但在Python中,最常用的数据类型却不是列表和元组,而是字符串.要想深入了解字符串,必须先掌握字符编码问题.因此本篇博文 ...
- 记一次安装Nginx+php-fpm安装后无法解析.php文件,状态码200,但显示空白页
安装环境: Nginx:Nginx1.12.2 PHP:PHP 7.2 系统:CentOS 7.4 安装方式: Nginx与PHP都是yum安装的,具体步骤: 1.安装epel源再安装Nginx: r ...