vue.config.js中configureWebpack与chainWebpack区别

2022-01-24 13:35:31 阅读：269 来源： 互联网

标签：vue configureWebpack module loader resolve chainWebpack js config

configureWebpack与chainWebpack的作用相同，唯一的区别就是他们修改webpack配置方式不同：

https://cli.vuejs.org/zh/config/#configurewebpack

configureWebpack 通过操作对象得形式来修改迷人得webpack配置，该对象将会呗webpack-merge合并入最终得webpack配置

chainWebpack 通过链式编程的形式来修改默认的webpack配置

1.configureWebpack
1.1configureWebpack对象形式
　　

configureWebpack: {
  resolve: {
   // 别名配置
    alias: {
      'assets': '@/assets',
      'common': '@/common',
　　　　'components': '@/components'
   }    
 }  
}

1.2configureWebpack函数形式

const path = require('path');
function resolve(dir) {
　　return path.join(__dirname,dir)
}
module.exports = {
 devServer: {
   ...
 },
 lintOnSave:false, // eslint-loader 是否在保存时候检查代码
 productionSourceMap: false, // 生产环境是否生成sourceMap 文件
 filenameHashing: true, // 文件hash

　　configureWebpack: config => {
　　　　if(process.env.NODE_ENV === 'production') {

　　　　　　...
　　　　}else {
　　　　　　...
　　　　}
　　　　// 直接修改配置
　　　　config.resolve.alias['assets'] = resolve('src/assets')
　　}

或者

configureWebpack: config => {
  if(process.env.NODE_ENV){
    ...
  }else{
    ...
  }
  // 返回一个将要合并得对象
  return {
    resolve: {
      alias: {
        '@asset': resolve("src/assets")
      }
    }
  }
}

2.chainWebpack

　　修改Loader选项

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options => {
      // 修改他的选项
      return options
    })
  }
}

　　添加一个新的Loader

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('graphql')
    .test('/\.graphql$/')
    .use(''graphql-tag/loader')
     .loader('graphql-tag/loader)
     .end()
    // 你还可以再添加一个loader
    .use('other-loader')
      .loader('other-loader')
      .end()
  }
}

替换一个规则里的Loader

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清楚已有的所有loader。
    // 如果你不这样做，接下来的loader会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替换的 loader 
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

标签：vue,configureWebpack,module,loader,resolve,chainWebpack,js,config
来源： https://www.cnblogs.com/chuanmin/p/15838988.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue.config.js中configureWebpack与chainWebpack区别