vue-cli脚手架build目录中的webpack.base.conf.js配置文件
转载自:http://www.cnblogs.com/ye-hcj/p/7082620.html
webpack.base.conf.js配置文件// 引入nodejs路径模块
var path = require('path')
// 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-style-loader的
var utils = require('./utils')
// 引入config目录下的index.js配置文件,主要用来定义一些开发和生产环境的属性
var config = require('../config')
// vue-loader.conf配置文件是用来解决各种css文件的,定义了诸如css,less,sass之类的和样式有关的loader // 详情请看(1)
var vueLoaderConfig = require('./vue-loader.conf')
// 返回到dir为止的绝对路径
function resolve (dir) {
return path.join(__dirname, '..', dir)
} module.exports = {
entry: {
// 入口文件是src目录下的
index: ['babel-polyfill', './src/index-main.js'],
admin: ['babel-polyfill', './src/admin-main.js']
},
output: {
// 路径是config目录下的index.js中的build配置中的assetsRoot,也就是dist目录
path: config.build.assetsRoot,
filename: '[name].js', //name就是入口文件前面的key值,此处是index和admin
//资源发布路径 // 上线地址,也就是真正的文件引用路径,
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
// resolve是webpack的内置选项,也就是说当使用 import "jquery",该如何去执行这件事
// 情就是resolve配置项要做的,import jQuery from "./additional/dist/js/jquery" 这样会很麻烦,可以起个别名简化操作
extensions: ['.js', '.vue', '.json'],// 省略扩展名,也就是说.js,.vue,.json文件导入可以省略后缀名,这会覆盖默认的配置,所以要省略扩展名在这里一定要写上
alias: {
//我的理解是此处指定别名 require('vue/dist/vue.esm.js') 可以简化为require('vue$')
// resolve('src') 其实在这里就是项目根目录中的src目录,使用 import somejs from "@/some.js" 就可以导入指定文件,是不是很高大上
'@': resolve('src')
}
},
// module用来解析不同的模块
module: {
rules: [
{
// 对vue文件使用vue-loader,该loader是vue单文件组件的实现核心,专门用来解析.vue文件的
test: /\.vue$/,
loader: 'vue-loader',
// 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
options: vueLoaderConfig
},
{
test: /\.js$/,
// 对js文件使用babel-loader转码,该插件是用来解析es6等代码
loader: 'babel-loader',
// 指明src和test目录下的js文件要使用该loader
include: [resolve('src'), resolve('test')]
},
{
// 对图片相关的文件使用 url-loader 插件,这个插件的作用是将一个足够小的文件生成一个64位的DataURL
// 可能有些老铁还不知道 DataURL 是啥,当一个图片足够小,为了避免单独请求可以把图片的二进制代码变成64位的
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// 限制 10000 个字节以下转base64,以上不转
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]'),
//资源发布路径
//publicPath: 'http://vue.cn/'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
// 字体文件处理,和上面一样
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
vueLoaderConfig就是下面的
{
css: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
sourceMap: true,
extract: true
}
}],
fallback: 'vue-style-loader'
}),
postcss: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
sourceMap: true,
extract: true
}
}],
fallback: 'vue-style-loader'
}),
less: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
extract: true
}
},
{
loader: 'less-loader',
options: {
sourceMap: true,
extract: true
}
}
],
fallback: 'vue-style-loader'
}),
sass: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
extract: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
extract: true,
indentedSyntax: true
}
}
],
fallback: 'vue-style-loader'
}),
//剩下的略
}
vue-cli脚手架build目录中的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脚手架build目录中的webpack.dev.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
// 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = req ...
- vue-cli脚手架build目录中的karma.conf.js配置文件
本文系统讲解vue-cli脚手架build目录中的karma.conf.js配置文件 这个配置文件是命令 npm run unit 的入口配置文件,主要用于单元测试 这条命令的内容如下 "c ...
- vue-cli脚手架build目录中的dev-server.js配置文件
本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 由于这 ...
- vue-cli脚手架build目录中的build.js配置文件
该随笔收藏自: vue-cli脚手架build目录中的build.js配置文件 这个配置文件是命令npm run build 的入口配置文件,主要用于生产环境 由于这是一个系统的配置文件,将涉及很多的 ...
- vue-cli脚手架build目录中check-versions.js的配置
转载自:https://www.cnblogs.com/ye-hcj/p/7074363.html 本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检 ...
- 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脚手架之webpack.base.conf.js
webpack相关的重要配置文件将在这一节给出.webpack水很深啊^o^,在此先弄清楚原配文件内容的含义,后续可以自己根据实际情况配置. webpack.base.conf.js:配置vue开发环 ...
随机推荐
- LodRunner实现大负载测试的四部曲(配置系统参数、配置LR、修改脚本、设置组策略)
见 http://www.51testing.com/?uid-97659-action-viewspace-itemid-210924 LoadRunner以下简称(LR)是目前业界最流行的压力测试 ...
- ChemDraw使用不了怎么办
ChemDraw作为一款专业级的化学绘图软件,不仅可以帮助用户绘制图像在数据计算方面也起了很大作用,因此,ChemDraw非常受用户的欢迎.但是我们在使用过程中难免会遇到各种问题,特别是对于新手用户, ...
- 数据降维PCA——学习笔记
PCA主成分分析 无监督学习 使方差(数据离散量)最大,更易于分类. 可以对隐私数据PCA,数据加密. 基变换 投影->内积 基变换 正交的基,两个向量垂直(内积为0,线性无关) 先将基化成各维 ...
- Python+selenium之获取文本值和下拉框选择数据
Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...
- ArcGIS 空间数据库备份
Expdp system/ddd@orcl directory=sdebak dumpfile=20170124_1_ServerBak.dmp schemas=(sde, ddd)
- 面试题思考:解释一下什么叫AOP(面向切面编程)
这种在运行时,动态地将代码切入到类的指定方法.指定位置上的编程思想就是面向切面的编程. AOP是Spring提供的关键特性之一.AOP即面向切面编程,是OOP编程的有效补充. 使用AOP技术,可以将一 ...
- oracle的存储过程如何返回结果集
CREATE OR REPLACE PACKAGE pkg_test AS TYPE myrctype IS REF CURSOR; PROCEDURE get (p_id NUM ...
- 【BZOJ2905】背单词 fail树+DFS序+线段树
[BZOJ2905]背单词 Description 给定一张包含N个单词的表,每个单词有个价值W.要求从中选出一个子序列使得其中的每个单词是后一个单词的子串,最大化子序列中W的和. Input 第一行 ...
- mysql数据的导入与导出
参考:http://blog.sina.com.cn/s/blog_81b2b2a1010188q0.html http://blog.csdn.net/xin_yu_xin/article/det ...
- TCL电视直播软件
升级你的电视系统我的型号46寸 V7300 3D,具体的升级程序在"技术宅"里有下载 找个格式化过的U盘把你的程序拷贝进去,插在电视上,电视会自动升级 当你成功安装V8-0MT32 ...