vue-cli4打包(vue.config.js)修改js,css,img,fonts的输出路径

vue.config.js

module.exports = {
    
    
   ....
    // 修改js输出路径
    configureWebpack: {
    
    
        output: {
    
    
            filename: "custom-js/[name].[hash:8].js",
            chunkFilename: "custom-js/[name].[hash:8].js",
        },
    },
    // 修改css输出路径
    css: {
    
    
        // css是否从js中分离出来,默认true
        // extract: true,
        sourceMap: false,
        extract: {
    
    
            filename: "custom-css/[name].[hash:8].css",
            chunkFilename: "custom-css/[name].[hash:8].css",
        },
    },
    chainWebpack: (config) => {
    
    
       // 修改图片输出目录
      config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
    
    
        options.fallback.options.name = 'custom-img/[name].[hash:8].[ext]';
        return options;
      });
    // 更改字体的输出路径
      config.module
      .rule('fonts')
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
    
    
        options.fallback.options.name = 'custom-fonts/[name].[hash:8].[ext]';
        return options;
      });   
    },

猜你喜欢

转载自blog.csdn.net/qq_42611074/article/details/130827816