webpack.base.conf.js

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

// 給出正確的絕對路徑
function resolve (dir) {
return path.join(__dirname, '..', dir)
}

module.exports = {
// 配置webpack編譯入口
entry: {
app: './src/main.js'
},

// 配置webpack輸出路徑和命名規則
output: {
// webpack輸出的目標文件夾路徑（例如：/dist）

path: config.build.assetsRoot,
// webpack輸出bundle文件命名格式
filename: '[name].js',
// webpack編譯輸出的發布路徑
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},

// 配置模塊resolve的規則
resolve: {
// 自動resolve的擴展名
extensions: ['.js', '.vue', '.json'],
// resolve模塊的時候要搜索的文件夾

modules: [ resolve('src'), resolve('node_modules') ],

// 創建路徑別名，有了別名之后引用模塊更方便，

例如
// import Vue from 'vue/dist/vue.common.js'可以寫成 import Vue from 'vue'
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components')
}
},

// 配置不同類型模塊的處理規則
module: {
rules: [
{// 對src和test文件夾下的.js和.vue文件使用eslint-loader
test: /\.(js|vue)$/,

loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{// 對所有.vue文件使用vue-loader
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{// 對src和test文件夾下的.js文件使用babel-loader

test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{// 對圖片資源文件使用url-loader，query.name指明了輸出的命名規則
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{

// 對字體資源文件使用url-loader，query.name指明了輸出的命名規則
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}