VueJS: Làm việc với Webpack

Cấu hình đơn giản

Cách dễ nhất để tinh chỉnh cấu hình webpack là cung cấp một đối tượng cho tùy chọn configureWebpack trong vue.config.js:

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

Đối tượng sẽ được hợp nhất vào cấu hình webpack cuối cùng bằng cách sử dụng webpack-merge.

CẢNH BÁO

Một số tùy chọn webpack được đặt dựa trên các giá trị trong vue.config.js và không nên bị mutate trực tiếp. Ví dụ, thay vì sửa đổi output.path, bạn nên sử dụng tùy chọn outputDir trong vue.config.js; thay vì sửa đổi output.publicPath, bạn nên sử dụng tùy chọn baseUrl trong vue.config.js. Điều này là do các giá trị trong vue.config.js sẽ được sử dụng ở nhiều vị trí bên trong cấu hình để đảm bảo mọi thứ hoạt động đúng với nhau.

Nếu bạn cần hành vi có điều kiện dựa trên môi trường, hoặc muốn thay đổi trực tiếp cấu hình, hãy sử dụng một hàm (sẽ được lượng giá là lazy sau khi các biến env được đặt). Hàm nhận được cấu hình đã giải quyết làm đối số. Bên trong hàm, bạn có thể thay đổi trực tiếp cấu hình, hoặc trả về một đối tượng sẽ được hợp nhất:

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

Chaining (Nâng cao)

Cấu hình webpack nội bộ được duy trì bằng cách sử dụng chuỗi webpack. Đây là thư viện cung cấp sự trừu tượng hóa trên cấu hình webpack thô, với khả năng định nghĩa các quy tắc tải có tên và các trình cắm thêm có tên, và sau đó "nhấn" vào các quy tắc đó và sửa đổi các tùy chọn của chúng.

Điều này cho phép chúng ta kiểm soát tốt hơn cấu hình bên trong. Dưới đây bạn sẽ thấy một số ví dụ về các sửa đổi phổ biến được thực hiện thông qua tùy chọn chainWebpack trong vue.config.js.

#Sửa đổi tùy chọn của trình tải

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

#Thêm trình tải mới

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}

#Thay thế Trình tải của một Rule

Nếu bạn muốn thay thế Trình tải cơ sở hiện tại, ví dụ: sử dụng  vue-svg-loader để inline các tệp SVG thay vì tải tệp:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

Sửa đổi tùy chọn của plugin

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}

Bạn sẽ cần phải làm quen với API của webpack-chain và đọc một số mã nguồn để hiểu cách tận dụng toàn bộ sức mạnh của tùy chọn này, nhưng nó mang lại cho bạn một cách rõ ràng và an toàn hơn để sửa đổi cấu hình webpack hơn các giá trị trực tiếp.

Ví dụ: giả sử bạn muốn thay đổi vị trí mặc định của index.html từ /Users/username/proj/public/index.html thành /Users/username/proj/app/templates/index.html. Bằng cách tham khảo html-webpack-plugin, bạn có thể thấy danh sách các tùy chọn mà bạn có thể chuyển đổi. Để thay đổi đường dẫn mẫu của chúng ta, chúng ta có thể chuyển vào một đường dẫn mẫu mới với cấu hình sau:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args
      })
  }
}

Bạn có thể xác nhận rằng thay đổi này đã được thực hiện bằng cách kiểm tra cấu hình webpack vue với tiện ích vue inspect, mà chúng ta sẽ thảo luận ở phần tiếp theo.

Kiểm tra cấu hình Webpack của project

Kể từ khi @vue/cli-service lược bớt đi các cấu hình webpack, nó có thể khó khăn hơn để hiểu những gì được đưa vào trong cấu hình, đặc biệt là khi bạn đang cố gắng tinh chỉnh.

vue-cli-service cho thấy lệnh inspect kiểm tra cấu hình webpack được giải quyết. Binary global vue cũng cung cấp lệnh inspect, và nó chỉ đơn giản là proxy vue-cli-service inspect trong dự án của bạn.

Lệnh này sẽ in cấu hình webpack đã giải quyết thành stdout, cũng chứa các gợi ý về cách truy cập các quy tắc và trình cắm thông qua chuỗi.

Bạn có thể chuyển hướng đầu ra vào một tệp để kiểm tra dễ dàng hơn:

vue inspect > output.js

Lưu ý đầu ra không phải là tệp cấu hình webpack hợp lệ, đó là định dạng được tuần tự hóa chỉ có nghĩa là để kiểm tra.

Bạn cũng có thể kiểm tra một tập hợp con của cấu hình bằng cách chỉ định đường dẫn:

# chỉ kiểm tra rule đầu tiên
vue inspect module.rules.0

Hoặc, nhắm mục tiêu quy tắc hoặc plugin được đặt tên:

vue inspect --rule vue
vue inspect --plugin html

Cuối cùng, bạn có thể liệt kê tất cả các quy tắc và plugin được đặt tên:

vue inspect --rules
vue inspect --plugins

#Sử dụng cấu hình đã giải quyết dưới dạng tệp

Một số công cụ bên ngoài có thể cần quyền truy cập vào cấu hình webpack đã giải quyết dưới dạng tệp, ví dụ: IDE hoặc công cụ dòng lệnh mong đợi đường dẫn cấu hình webpack. Trong trường hợp đó, bạn có thể sử dụng đường dẫn sau:

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

Tệp này tự động phân giải và xuất cấu hình webpack giống hệt được sử dụng trong các lệnh vue-cli-service, bao gồm cả cấu hình từ plugin và thậm chí cả cấu hình tùy chỉnh của bạn.