vue-cli下面的config/index.js注解 webpack.base.conf.js注解
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' } }