vue-cli3 基本配置 webpack.config.js

前言

Vue.js 是一个渐进式 JavaScript 框架，它不仅提供了数据绑定和组件化的能力，还有丰富的生态系统。而 vue-cli3 是 Vue.js 官方提供的一个脚手架工具，它可以帮助我们快速搭建 Vue.js 项目，而且还能够自定义配置，满足不同的需求。

在 vue-cli3 中，webpack 是默认的打包工具，webpack.config.js 是 webpack 配置文件。通过修改 webpack.config.js，我们可以对 webpack 的各种配置进行修改，从而满足自己的需求。本文将介绍 vue-cli3 中 webpack.config.js 的基本配置。

基本配置

修改入口文件

在 vue-cli3 中，入口文件默认为 src/main.js。如果我们想要修改入口文件，可以在 webpack.config.js 中进行配置。例如，我们想要将入口文件修改为 src/app.js。

// javascriptcn.com 代码示例
module.exports = {
  chainWebpack: config => {
    config
      .entry('app')
      .clear()
      .add('./src/app.js')
      .end()
  }
}

修改输出目录

在 vue-cli3 中，输出目录默认为 dist。如果我们想要修改输出目录，可以在 webpack.config.js 中进行配置。例如，我们想要将输出目录修改为 build。

module.exports = {
  outputDir: 'build'
}

添加别名

在 vue-cli3 中，我们可以使用 @ 来代替 src 目录。但是，有时候我们可能需要添加其他别名，以方便我们的开发。例如，我们想要将 @components 指向 src/components 目录。

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@components', resolve('src/components'))
  }
}

添加 Loader

在 vue-cli3 中，我们可以通过添加 Loader 来处理各种文件。例如，我们想要添加 less-loader 来处理 less 文件。

// javascriptcn.com 代码示例
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('less')
      .test(/\.less$/)
      .use('less-loader')
      .loader('less-loader')
      .end()
  }
}

添加插件

在 vue-cli3 中，我们可以通过添加插件来扩展 webpack 的功能。例如，我们想要添加 webpack-bundle-analyzer 插件来分析打包后的文件。

// javascriptcn.com 代码示例
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new BundleAnalyzerPlugin()
        ]
      }
    }
  }
}

总结

通过对 webpack.config.js 的基本配置，我们可以对 webpack 进行自定义配置，满足不同的需求。在实际开发中，我们可以根据自己的需求进行配置，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65791a3fd2f5e1655d311e66