转载自：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'
}),
//剩下的略
}