// 正式发布环境下编译输出的上线路径的根路径
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 路径别名
alias: {
// 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [{
// 审查 js 和 vue 文件
// https://github.com/MoOx/eslint-loader
test: /.(js|vue)$/,
loader: 'eslint-loader',
// 表示预先处理
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
// 处理 vue文件
// https://github.com/vuejs/vue-loader
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
// 编译 js
// https://github.com/babel/babel-loader
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')] },
{
// 处理图片文件
// https://github.com/webpack-contrib/url-loader
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
// 处理字体文件
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
] }
}
config/index.js
该文件在很多文件中都用到，是主要的配置文件，包含静态文件的路径、是否开启sourceMap等。其中，分为两个部分dev（开发环境的配置）和build（生产环境的配置）。
// 详情见文档：https://vuejs-templates.github.io/webpack/env.html
var path = require('path')module.exports = {
// production 生产环境
build: {
// 构建环境
env: require('./prod.env'),
// 构建输出的index.html文件
index: path.resolve(__dirname, '../dist/index.html'),
// 构建输出的静态资源路径
assetsRoot: path.resolve(__dirname, '../dist'),
// 构建输出的二级目录
assetsSubDirectory: 'static',
// 构建发布的根目录，可配置为资源服务器域名或 CDN 域名
assetsPublicPath: '/',
// 是否开启 cssSourceMap
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
