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.配置打包chunkfile的名字

// 引流页面
        {
            path: '/downLoadOrOpen',
            name: 'downLoadOrOpen',
            component: () => import( /* webpackChunkName: 'downLoadOrOpen' */ '@mybill/pages/downLoadOrOpen')
        },
在路由配好magic comment

https://segmentfault.com/q/1010000019051613

https://blog.csdn.net/javao_0/article/details/85162458