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 đổioutput.path
, bạn nên sử dụng tùy chọnoutputDir
trongvue.config.js;
thay vì sửa đổioutput.publicPath
, bạn nên sử dụng tùy chọnbaseUrl
trongvue.config.js
. Điều này là do các giá trị trongvue.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
.
Gợi ý
kiểm tra vue sẽ cực kỳ hữu ích khi bạn đang cố gắng truy cập các trình tải cụ thể thông qua chuỗi.
#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 }) } }
Gợi ý
Đối với trình tải liên quan đến CSS, bạn nên sử dụng css.loaderOptions thay vì nhắm mục tiêu trực tiếp trình tải thông qua chuỗi. Điều này là do có nhiều quy tắc cho từng loại tệp CSS và css.loaderOptions đảm bảo bạn có thể ảnh hưởng đến tất cả các quy tắc ở một nơi duy nhất.
#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.