浅谈Vue-cli 命令行工具分析(3)
基础配置文件 webpack.base.conf.js
基础的 webpack 配置文件主要根据模式定义了入口出口,以及处理 vue, babel 等的各种模块,是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。
'use strict' const path = require('path'); const utils = require('./utils'); const config = require('../config'); function resolve(dir) { return path.join(__dirname, '..', dir); } module.exports = { context: path.resolve(__dirname, '../'), // 基础目录 entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, // 默认'../dist' filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath // 生产模式publicpath : config.dev.assetsPublicPath // 开发模式publicpath }, resolve: { // 解析确定的拓展名,方便模块导入 extensions: ['.js', '.vue', '.json'], alias: { // 创建别名 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') // 如 '@/components/HelloWorld' } }, module: { rules: [{ test: /\.vue$/, // vue 要在babel之前 loader: 'vue-loader', options: vueLoaderConfig //可选项: vue-loader 选项配置 },{ test: /\.js$/, // babel loader: 'babel-loader', include: [resolve('src')] },{ // url-loader 文件大小低于指定的限制时,可返回 DataURL,即base64 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // url-loader 图片 loader: 'url-loader', options: { // 兼容性问题需要将query换成options limit: 10000, // 默认无限制 name: utils.assetsPath('img/[name].[hash:7].[ext]') // hash:7 代表 7 位数的 hash } },{ test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // url-loader 音视频 loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } },{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // url-loader 字体 loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // 是否 polyfill 或 mock setImmediate: false, dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }
开发模式配置文件 webpack.dev.conf.js
开发模式的配置文件主要引用了 config 对于 devServer 的设定,对 css 文件的处理,使用 DefinePlugin 判断是否生产环境,以及其他一些插件。
'use strict' const webpack = require('webpack'); const config = require('../config'); const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const portfinder = require('portfinder'); // 自动检索下一个可用端口 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); // 友好提示错误信息 const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) // 自动生成了 css, postcss, less 等规则,与自己一个个手写一样,默认包括了 css 和 postcss 规则 }, devtool: config.dev.devtool,// 添加元信息(meta info)增强调试 // devServer 在 /config/index.js 处修改 devServer: { clientLogLevel: 'warning', // console 控制台显示的消息,可能的值有 none, error, warning 或者 info historyApiFallback: true, // History API 当遇到 404 响应时会被替代为 index.html hot: true, // 模块热替换 compress: true, // gzip host: process.env.HOST || config.dev.host, // process.env 优先 port: process.env.PORT || config.dev.port, // process.env 优先 open: config.dev.autoOpenBrowser, // 是否自动打开浏览器 overlay: config.dev.errorOverlay ? { // warning 和 error 都要显示 warnings: true, errors: true, } : false, publicPath: config.dev.assetsPublicPath, // 配置publicPath proxy: config.dev.proxyTable, // 代理 quiet: true, // 控制台是否禁止打印警告和错误 若使用 FriendlyErrorsPlugin 此处为 true watchOptions: { poll: config.dev.poll, // 文件系统检测改动 } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') // 判断生产环境或开发环境 }), new webpack.HotModuleReplacementPlugin(), // 热加载 new webpack.NamedModulesPlugin(), // 热加载时直接返回更新的文件名,而不是id new webpack.NoEmitOnErrorsPlugin(), // 跳过编译时出错的代码并记录下来,主要作用是使编译后运行时的包不出错 new HtmlWebpackPlugin({ // 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去 filename: 'index.html', template: 'index.html', inject: true // 可能的选项有 true, 'head', 'body', false }), ] }) module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port; // 获取当前设定的端口 portfinder.getPort((err, port) => { if (err) { reject(err) } else { process.env.PORT = port; // process 公布端口 devWebpackConfig.devServer.port = port; // 设置 devServer 端口 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 错误提示插件 compilationSuccessInfo: { messages: [`Your application is running here: http://${config.dev.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig); } }) })
内容版权声明:除非注明,否则皆为本站原创文章。