vue-cli最新配置

const path               = require("path");
const webpack            = require("webpack");
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
var WebpackMd5Hash       = require('webpack-md5-hash')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
const isProduction       = process.env.NODE_ENV === "production";
const resolve            = (dir) => {
  return path.resolve(__dirname, dir);
};

const config = {
  pages           : {
    index: {
      // page 的入口
      entry   : 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title   : 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks  : ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
  },
  runtimeCompiler : true,
  devServer       : {
    open: true,
    hot : true
  },
  chainWebpack    : config => {
    // eslint-disable-next-line no-console
    config.module.rule('eslint').uses.delete('eslint-loader');
    config.module.rule('images').uses.delete('file-loader');
    config.module.rule('images').uses.delete('url-loader');

    //设置别名
    config.resolve.alias
          .set('_a', resolve('src/assets'))
          .set('_c', resolve('src/components'))
          .set('_r', resolve('src/router'))
          .set('_s', resolve('src/store'))
          .set('_v', resolve('src/views'))
          .set('_u', resolve('src/utils'))
    return config;
  },
  configureWebpack: config => {
    let optimization = {
      minimizer: [
        new UglifyJsPlugin({
         cache: true,//启动缓存
         parallel: true,//启动并行压缩
         //如果为true的话，可以获得sourcemap
         sourceMap: false
        }),
        //压缩css资源的
        new OptimizeCSSAssetsPlugin({
          assetNameRegExp:/\.css$/g,
          //cssnano是PostCSS的CSS优化和分解插件。cssnano采用格式很好的CSS，并通过许多优化，以确保最终的生产环境尽可能小。
          cssProcessor:require('cssnano')
        })
      ]
    };
    let output={
      // hash 是根据整个项目来构建,同一个项目构建过程hash是一样的， 一旦任何文件改动，整个hash都会改变
      //chunkhash 是根据入口文件去解析依赖文件、构建对应的chunk,生成hash。把公共库和程序入口文件区分开，单独打包构建，如a改动了，a文件会新生成chunkhash文件名，同时入口文件index也会生成新的chunkhash文件名，因为index是入口文件，所至少会有两个文件是更新的
      // 但是chunk-vendors是不会改变的，因为他是被单独抽离出来的文件形成，只要公共文件不改变，他就不会改变。开发写法问题：如果开发在home页面以同步的方式引入了B,两个组件，那么webpack认为home页面与BC组件
      //应该打包在一起，则他们三是整体，一旦B组件代码改了，那么Home,B,C三个的hash也会改变；但是以异步的方式引入，webpack会将B,C组件独立打包，如B内容改变，则HOME,C组件也不会改变
      filename:'js/[name].[chunkhash].js',
      chunkFilename:'js/[name].[chunkhash].js'//非主入口文件打包方式，比如路由懒加载 组件懒加载
    };
    let module  = {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg|bmp|webp)$/,
          use : [
            {
              loader : resolve('loader/webp-loader.js'),
              options: {
                name   : "img/[name].[hash].[ext]",
                quality: 40,//针对webp的
                limit  : 10 * 1024 //小于10的转为base64 其他需要压缩处理，避免生成base64导致文件变大
              }
            },
            {
              loader : 'image-webpack-loader',
              options: {
                mozjpeg : {
                  progressive: true,
                  quality    : 65
                },
                optipng : {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.65, 0.90],
                  speed  : 4
                },
                gifsicle: {
                  interlaced: false,
                },
                webp    : {
                  quality: 75
                }
              }
            },
          ]
        }
      ]
    };
    let plugins = [
      //生产使用
      isProduction && new webpack.HashedModuleIdsPlugin(),//稳定webpack的hash,模块id带来缓存问题,默认的 id 命名根据模块引入顺序，赋予一个整数(1、2、3……)。当你在源码中任意增添或删减一个模块的依赖,都会影响整个id序列的改变
      isProduction && new BundleAnalyzerPlugin()
    ].filter(Boolean);

    let configs = {module,plugins};
    if (isProduction){
      configs.output = output;
      configs.optimization = optimization;
    }
    // return smw.wrap(configs);
    return configs;
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 插入全局样式
        resolve('src/assets/common.less')
      ],
    }
  }
};



module.exports = config;