config/indexjs详解上代码:
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 代理作用是用来建一个虚拟api服务器用来代理本机的请求，只能用于本地开发模式
proxyTable: {
'/api': {
target: 'http://10.0.111.111:9999', //要访问的后端接口
changeOrigin: true,
pathRewrite: {
'^/api': 'http://10.0.111.111:9999'
}
}
},
// 原本是localhost可以配置成自己的ip
host: '10.98.15.99',
// dev-server的端口号，可以自行更改
port: 9898,
// 是否自动打开浏览器
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- //是否使用语法检测
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false, /**
* Source Maps
*/ // https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
//是否生成css，map文件，上面这段英文就是说使用这个cssmap可能存在问题，但是按照经验，问题不大，可以使用
//一般false处理
cssSourceMap: true
}, build: {
//下面是相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html
index: path.resolve(__dirname, '../dist/index.html'), //下面定义的是静态资源的根目录 也就是dist目录
assetsRoot: path.resolve(__dirname, '../dist'),
// 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
assetsSubDirectory: 'static',
// 下面定义的是静态资源的公开路径，也就是真正的引用路径,一般会加'./'
assetsPublicPath: '/', /**
* Source Maps
*/
//下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
//map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
//有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // 下面定义要压缩哪些类型的文件
productionGzipExtensions: ['js', 'css'], // 下面是用来开启编译完成后的报告，可以通过设置值为true和false来开启或关闭
// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置
bundleAnalyzerReport: process.env.npm_config_report
}
}
webpack.base.conf.js注解:
'use strict'
const path = require('path') // 引入nodejs路径模块
const utils = require('./utils')// 引入utils工具模块,utils主要用来处理css-loader和vue-style-loader的
const config = require('../config')// 引入config目录下的index.js配置文件,主要用来定义一些开发和生产环境的属性
const vueLoaderConfig = require('./vue-loader.conf')// vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的loader // 此函数是用来返回当前目录的平行目录的路径，因为有个'..'
function resolve (dir) {
return path.join(__dirname, '..', dir)
} // 配置eslint检测
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}) module.exports = {
context: path.resolve(__dirname, '../'),
//文件入口配置
entry: {
app: ["babel-polyfill", "./src/main.js"] //ie11下白屏或者说es6转码都行 入口文件是src目录下的main.js
},
//文件出口配置
output: {
path: config.build.assetsRoot,// 路径是config目录下的index.js中的build配置中的assetsRoot，也就是dist目录
filename: '[name].js',// 文件名称这里使用默认的name也就是main
publicPath: process.env.NODE_ENV === 'production' // 上线地址，也就是真正的文件引用路径，如果是production生产环境，其实这里都是 '/'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],// 省略扩展名，也就是说.js,.vue,.json文件导入可以省略后缀名，这会覆盖默认的配置，所以要省略扩展名在这里一定要写上
alias: {
//配置别名,后面的$符号指精确匹配，也就是说只能使用 import vuejs from "vue" 这样的方式导入vue.esm.js文件，不能在后面跟上 vue/vue.js
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
// module用来解析不同的模块 插件配置项都在这了
module: {
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []), //语法检测
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
//node主要是阻止一些webpack的默认注入行为，因为在vue中，已经具备了这些功能;
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// 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'
}
}