const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const CompressionPlugin = require('compression-webpack-plugin') const name = process.env.VUE_APP_TITLE || 'xxxxxx系统' // 网页标题 const port = process.env.port || process.env.npm_config_port || 80 // 端口 const cdn = { // cdn:模块名称和模块作用域命名(对应window里面挂载的变量名称) externals: { vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', axios: 'axios', }, // cdn的css链接 css: [], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js', ], } module.exports = { // <------------------- 基础配置 --------------------> //生产环境是否要生成 sourceMap productionSourceMap: false, //部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致* //可以通过三元运算去配置dev和prod环境, //publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './' publicPath: './', //build 时输出的文件目录 outputDir: 'dist', // 放置静态文件夹目录 assetsDir: 'assets', // 是否开启eslint保存检测,有效值:ture | false | 'error' lintOnSave: process.env.NODE_ENV === 'development', // dev环境下,webpack-dev-server 相关配置 devServer: { // 开发运行时的端口 port: 8090, // 开发运行时域名 host: '0.0.0.0', // 是否启用 https https: false, // pm run serve 时是否直接打开浏览器 open: true, // 代理配置 proxy: { // '/api': { // target: 'http://localhost:3000', // changeOrigin: true, // pathRewrite: { // '^/api': '', // }, // }, }, }, pluginOptions: { // 这个配置项指定了要配置的插件名称,这个插件主要用于将公共的样式资源注入到所有的样式文件中,以便全局使用 'style-resources-loader': { //指定了要处理的预处理器类型,这里是 less,表示要处理Less类型的样式文件。 preProcessor: 'less', // 指定了需要注入的样式文件路径,这里是一个数组。指定了要注入的Less样式文件的绝对路径。 patterns: [path.resolve(__dirname, './src/theme/theme.less')], }, }, // CSS 相关选项 css: { // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中(而不是动态注入到 JavaScript 中的 inline 代码) extract: true, // 是否开启 CSS source map sourceMap: false, // 向 CSS 相关的 loader 传递选项 loaderOptions: { sass: { sassOptions: { outputStyle: 'expanded' }, }, /**自适应配置 */ postcss: { plugins: [ // postcss require('postcss-pxtorem')({ //换算基数,默认100,把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px rootValue: 16, //允许REM单位增长到的十进制数字,小数点后保留的位数 unitPrecision: 5, propList: ['*'], //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值 // exclude: /(node_module)/, exclude: false, //(布尔值)允许在媒体查询中转换px。 mediaQuery: false, //要忽略并保留为px的选择器,本项目我是用的el ui框架,所以忽略他 selectorBlackList: ['.el'], // 设置要替换的最小像素值(3px会被转rem)。 默认 0 minPixelValue: 3, }), ], }, }, }, // <-------------------插件及规则的配置--------------------> configureWebpack: { // 用于识别Webpack生成的文件 name: name, // 这个部分是Webpack的模块解析配置 resolve: { // alias 可以用于创建别名, // 例如 @ 别名指向项目中的 src 目录,让你在引入模块时可以使用 @ 作为路径的别名。 alias: { '@': resolve('src'), }, // extensions: 允许省略文件扩展名引入模块。 // 例如,配置 .js、.vue、.json 后,当引入模块时可以省略这些后缀名。 extensions: ['.js', '.vue', '.json'], // 在解析模块时,指定解析失败时的备选方案,通常用于指定某些模块的 polyfill 或者备用模块。 fallback: { path: require.resolve('path-browserify'), }, }, // 构建过程中对静态资源进行gzip压缩的插件 plugins: [ // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件 // 这里使用了一个插件 CompressionPlugin new CompressionPlugin({ // 指定需要压缩的文件格式,这里设置为匹配 .js、.css、.html 后缀的文件。 test: /\.(js|css|html)?$/i, // 压缩后的文件名格式,[path].gz[query] 意味着生成的文件名将在原文件的基础上添加 .gz 后缀 filename: '[path].gz[query]', // 指定使用的压缩算法,这里设置为 gzip 表示使用gzip进行压缩。 algorithm: 'gzip', // 设置压缩率的阈值,只有达到该压缩率的文件才会被压缩。这里设置为 0.8,表示压缩率需要小于1才会进行压缩。 minRatio: 0.8, }), ], }, // 允许你在Webpack构建过程中使用链式操作来修改Webpack的配置 chainWebpack(config) { // 这两行代码删除了Webpack中默认的预加载和预获取资源的插件。 // 这可能是为了优化性能而移除了这些预加载和预获取的行为。 config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // 这段代码是使用 chainWebpack 配置中的 config.plugin('html'),针对 HTMLWebpackPlugin 插件进行自定义配置。 // 根据条件 isProduction 或 devNeedCdn,在生产环境或需要 CDN 资源时,将 CDN 配置信息 cdn 注入到 HTMLWebpackPlugin 插件中。 config.plugin('html').tap(args => { if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // 配置了处理SVG图标的 loader,并设置了特定的选项,如 symbolId: 'icon-[name]'。 // 在规则中排除了src/assets/icons目录之外的SVG文件,并且在规则中包含了src/assets/icons目录下的SVG文件。 // set svg-sprite-loader config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end() config.module .rule('icons') //这里定义了一个名为 icons 的Webpack规则,用于处理SVG图标文件 .test(/\.svg$/) //指定了匹配的文件格式为SVG,即以.svg结尾的文件会被这个规则匹配到。 .include.add(resolve('src/assets/icons')) //将规则应用到 src/assets/icons 目录下的SVG文件上。 .end() // 方法结束当前的链式调用,类似于链式调用的分隔符或者结束符号, .use('svg-sprite-loader') //使用了 svg-sprite-loader 这个loader来处理匹配到的SVG文件 .loader('svg-sprite-loader') //方法和 use() 方法的作用类似,用于指定使用的loader名称。 .options({ //方法用于设置loader的选项,这里通过 svg-sprite-loader 的选项 symbolId: 'icon-[name]', // 来指定生成的符号(symbol)的ID格式。这里设置为 'icon-[name]',每个SVG图标会根据其名称生成对应的ID。 }) .end() // 在生产环境下,对图片进行压缩 config.module .rule('images') // 使用正则表达式定义了要匹配的图片文件类型。这个规则会匹配文件名以.png、.jpg、.jpeg、.gif或.svg结尾的图片文件 .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) // 通过.use()方法指定了要使用的loader,这里是image-webpack-loader。 // image-webpack-loader是一个用于压缩和优化图片的loader,可以在构建过程中对图片进行处理以减小文件体积。 .use('image-webpack-loader') .loader('image-webpack-loader') // options()方法用于传递给image-webpack-loader的选项。 // bypassOnDebug: true表示在开发模式下(debug模式)跳过对图片的压缩处理,以加速构建过程。 // 在生产环境下,图片压缩会被启用以减小文件大小,但在开发环境下,为了加快构建速度,会跳过这个压缩过程。 .options({ bypassOnDebug: true }) }, }
vue.config.js详情配置
于 2023-12-20 17:02:26 首次发布