Vue CLi3 修改webpack配置

简介: Vue CLi3 修改webpack配置

Vue CLi3 修改webpack配置

审查项目的 webpack 配置

因为 @vue/cli-service 对 webpack 配置进行了抽象,当你想查看webpack的配置时可以使用 inspect命令:

vue inspect # 在终端打印 webpack配置信息
vue inspect > output.js # 把webpack配置信息生成到output.js文件

注意,output.js 文件不是一个有效的 webpack 配置文件,仅用于审查。

修改webpack配置

修改路径别名为例:

  1. 项目根目录创建文件 vue.config.js
  2. 参考如下代码修改路径别名:
// vue.config.js
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('styles', resolve('src/assets/styles'))
  }
}

参考

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  runtimeCompiler: true,
  assetsDir: 'static',
  productionSourceMap: false, // 生产环境的 source map
  parallel: require('os').cpus().length > 1,
  configureWebpack: config => {
    // 公共配置
    // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      'src': resolve('src/common'),
      'common': resolve('src/views/common'),
      'static': resolve('static')
    })
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization = {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ['console.log']// 移除console
              }
            }
          })
        ]
      }
    } else {
      // 为开发环境修改配置...
    }
  },
  css: {
    loaderOptions: {
      css: {
        importLoaders: 1 // @import 引入的文件可被一个loader处理 (2 可被两个loader处理)
      }
    }
  },
  devServer: {
    port: 80,
    disableHostCheck: true, // 可使用本地host配置的域名访问
    proxy: {
      '/api': {
        agent: new ProxyAgent('http://132.128.11.12'),
        target: 'http://132.128.11.12',
        ws: false,
        changeOrigin: true
      }
    }
  }
}
相关文章
|
2月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
2月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
2月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
78 5
|
2月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
65 2
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
45 3
|
2月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
83 6
|
2月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
93 7
|
2月前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
2月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
78 2