const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
// entry: "./main.js",
// 基本路径
publicPath: "/", //vue2换成baseUrl
// 输出文件目录
outputDir: "dist",
// 用于嵌套生成的静态资产(js,css,img,fonts)目录
// assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
indexPath: 'index.html', // Default: 'index.html'
filenameHashing: true,
// 构建多页时使用
pages: undefined,
// eslint-loader是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来
transpileDependencies: [],
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// 自定义webpack配置 configureWebpack 与 chainWebpack 本质上没有什么区别,只是前者配置 简单方便,后者可以 更为细粒度地控制配置
// Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。
// 它允许我们更细粒度的控制其内部配置
chainWebpack: config => {
// config.resolve.alias
// .set('@', resolve('src'))
// .set('@common', resolve('@/components/common'))
},
configureWebpack: {
resolve: {
alias: {
// "@": resolve('src'),
// '@common': resolve('@/components/common'),
// '@bus': resolve('@/components/business'),
// '@basic': resolve('@/components/basic')
},
},
output: {
// // 把子应用打包成 umd 库格式
// library: `${name}-[name]`,
// libraryTarget: 'umd',
// jsonpFunction: `webpackJsonp_${name}`,
},
module: {
rules: [
// {
// test: /\.jsx?$/,
// exclude: /node_modules/,
// use: {
// loader: "babel-loader",
// options: {
// presets: ["@babel/preset-env"],
// plugins: ["@babel/plugin-transform-react-jsx"],
// },
// },
// },
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
// {
// test: /\.(le|c)ss$/,
// use: ["style-loader", "css-loader", "less-loader"],
// },
],
},
},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false,
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
// loaderOptions: {
// scss: {
// additionalData:
// '@import "~@/assets/stylesheet/variables";@import "~@/assets/stylesheet/mixins";'
// }
// postcss: {
// plugins: [
// require('postcss-plugin-px2rem')({
// rootValue: 100,
// exclude: /(node_modules|src\/components|sceneDefine2|sceneEleManage|sceneList|stylesheet)/,
// mediaQuery: false,
// selectorBlackList: ['no-rem']
// })
// ]
// }
// }
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
// parallel: require("os").cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
// open: process.platform === 'darwin',
//将服务启动后默认打开浏览器
open: true,
host: "localhost", // 使用花生壳之类的 需改为 0.0.0.0
port: 8080,
https: false,
hotOnly: false,
disableHostCheck: true, // 使用花生壳之类的 需设为false
// 该配置项可以在HTTP响应中注入一些HTTP响应头
headers: {
'X-foo': '112233'
},
proxy: {
// 设置代理
"/api": {
target: "http://www.test.com",
changeOrigin: true,
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'}
//pathRewrite: {'^/api': '/api'}
}
},
},
before: (app) => {},
},
// 第三方插件配置
pluginOptions: {
// ...
},
};
webpack-dev-server 相关配置,参考链接:https://www.cnblogs.com/wb336035888/p/10448873.html
https://blog.csdn.net/qq_38290251/article/details/112170092