上一篇说的是 webpack打包生成测试和生产版本； 这篇说的这个配置 应该是在打包之前应该配置好的
webpack配置如下：
1. webpack.base.conf.js
入口文件 entry 代码如下:
entry: { ?app: ‘./src/main.js‘}输出文件 output 代码如下：
output: { ?path: config.build.assetsRoot, ?// 导出目录的绝对路径 在项目的根目录下 会新建dist文件夹 ?filename: ‘[name].js‘, ?// 导出文件的文件名 ?publicPath: process.env.NODE_ENV === ‘production‘ ???? config.build.assetsPublicPath ???: config.dev.assetsPublicPath ?}整体代码
‘use strict‘;const path = require(‘path‘);const utils = require(‘./utils‘);const config = require(‘../config‘);const vueLoaderConfig = require(‘./vue-loader.conf‘);function resolve (dir) { ?return path.join(__dirname, ‘..‘, dir);}/* 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用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 = { ?entry: { ???app: ‘./src/main.js‘ ?}, ?output: { ???path: config.build.assetsRoot, // 导出目录的绝对路径 ???filename: ‘[name].js‘, // 导出文件的文件名 ???publicPath: process.env.NODE_ENV === ‘production‘ ?????? config.build.assetsPublicPath ?????: config.dev.assetsPublicPath ?}, ?// 设置模块如何被解析 ?resolve: { ???// 自动解析确定的扩展名，导入模块时不带扩展名 ???extensions: [‘.js‘, ‘.vue‘, ‘.json‘], ???// 创建import 或 require的别名 ???/* ????比如如下文件 ????src ??????components ????????a.vue ??????router ????????home ??????????index.vue ?????在index.vue里面，正常引用A组件；如下： ?????import A from ‘../../components/a.vue‘; ?????如果设置了 alias后，那么引用的地方可以如下这样了 ?????import A from ‘@/components/a.vue‘; ?????注意：这里的 @ 起到了 resolve(‘src‘)路径的作用了。 ???*/ ???alias: { ?????‘vue$‘: ‘vue/dist/vue.esm.js‘, ?????‘@‘: resolve(‘src‘) ???} ?}, ?module: { ???rules: [ ?????// 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。 ?????...(config.dev.useEslint ? [createLintingRule()] : []), ?????{ ???????test: /\.vue$/, ?// vue 文件后缀的 ???????loader: ‘vue-loader‘, // 使用vue-loader处理 ???????options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码 ?????}, ?????{ ???????test: /\.js$/, // js文件后缀的 ???????loader: ‘babel-loader‘, // 使用babel-loader处理 ???????include: [resolve(‘src‘), resolve(‘test‘)] // 包含src和test的文件夹 ?????}, ?????{ ???????test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 处理图片后缀 ???????loader: ‘url-loader‘, ?// 使用url-loader处理 ???????options: { ?????????limit: 10000, ?// 图片小于10000字节时以base64的方式引用 ?????????name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘) ?// 文件名为name.7位hash的值.扩展名 ???????} ?????}, ?????{ ???????test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, ?// 音频文件后缀 ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, // 小于10000字节时的时候处理 ?????????name: utils.assetsPath(‘media/[name].[hash:7].[ext]‘) // 文件名为name.7位hash的值.扩展名 ???????} ?????}, ?????{ ???????test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // 字体文件 ???????loader: ‘url-loader‘, ???????options: { ?????????limit: 10000, // 字体文件小于10000字节的时候处理 ?????????name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘) // 文件名为name.7位hash的值.扩展名 ???????} ?????} ???] ?}, ?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‘ ?}};对webpack.base.conf中的 const vueLoaderConfig = require(‘./vue-loader.conf‘);
vue-loader.conf.js 代码如下：
vue-cli+webpack打包配置
原文地址：https://www.cnblogs.com/ljh--/p/9447980.html