vue-cli經常使用配置

官方配置表：https://cli.vuejs.org/zh/config/#publicpath

1.vue inspect > output.js 將配置按webpack.config.js輸出

2.通常配置在vue.config.js中配置

configureWebpack: (config) => {
// 簡單/基礎配置，好比引入一個新插件
    config.devtool = 'sourceMap'
},

//webpackchain:https://github.com/neutrinojs/webpack-chain
chainWebpack: (config) => {
// 鏈式配置
// Create named rules which can be modified later

config.module .rule('lint') .test(/\.js$/) .pre() .include .add('src') .end() // Even create named uses (loaders) .use('eslint') .loader('eslint-loader') .options({ rules: { semi: 'off' } });

}


css: {
        loaderOptions: {
            css: {
                // 這裏的選項會傳遞給 commonCss-loader
            },
            postcss: {
                // 這裏的選項會傳遞給 postcss-loader
            }
        },
        extract: process.env.NODE_ENV === 'development' ? false : true,
        sourceMap: true
 },


loaderOptions: {
   css: {
    // options here will be passed to css-loader
   },
   postcss: {
    // options here will be passed to postcss-loader
   }
}

 webpackChain=》修改配置

chainWebpack: config => {
        config.devtool('source-map')
        config.module
          .rule('images')
          .use('url-loader')
          .tap(options => // tap修改參數的方法
            merge(options, { //merge方法是保證咱們不會覆蓋掉原有的其餘配置
              limit: '1120'
            })
          )

{ 
  devtool:'source-map',
  ...
  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [     
        ...
        /* config.module.rule('images') */
        {
          test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
          use: [
          /* config.module.rule('images').use('url-loader') */
          {
            loader: 'url-loader',
            options: {
              limit: '1120',
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
          ...
          ]
        }
    ]
  }
  ...
}

3.