0
Vấn đề về Webpack và NuxtJS
Chào mọi người,
Mình có vấn đề sau mọi người giúp đỡ mình với.
HIện tại mình có các file thư viện JS mình muốn xử dụng cho website của mình.
Các file JS:
/*
** assets/js/a.js
*/
console.log('File JS a');
/*
** assets/js/b.js
*/
console.log('File JS b');
/*
** assets/js/EEEEEE.js
*/
console.log('File JS EEEEEE');
/*
** assets/js/main.js
*/
require('./a.js')
require('./b.js)
console.log('File JS main');
Mình sử dụng NuxtJS và thêm vào file nuxt.config.js như sau:
build: {
vendor: [
'~/assets/js/EEEEEE.js',
'~/assets/js/main.js'
],
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
}
nhưng KHÔNG được.
Xin nhờ các cao thủ chỉ giáo giúp với ạ.
Và mình cũng tìm hiểu được biết là webpack có tính năng load những gì cần, chứ không load hết 1 lần vì nếu vậy ứng dụng nhiều file JS thì sẽ rất nặng.
Không biết cụ thể là như thế nào nhỉ?
Rất mong nhận được sự giúp đỡ của mọi người. Mình còn gà nên có gì sai sót mong mọi người bỏ qua cho.
Cảm ơn mọi người nhiều.
Add a comment
4 ANSWERS
+2
Bạn đọc kĩ hơn ở phần này nhé! https://nuxtjs.org/api/configuration-build
Ở extend có 2 tham số config và ctx, trong đó thì config sẽ chỉ đến các hoạt động bạn muốn thực hiện, còn context chỉ đến môi trường và đk thực hiện(isClient hay loader là gì )
Cảm ơn bạn rất nhiều, phần này mình cũng đã đọc qua, nhưng thực sự không hiểu lắm.
Mình đang tìm hiểu webpack nhưng hình như NuxtJS extend lại webpack nên cách sử dụng nó khác hay sao ý.
Hiện tại thì mình muốn build các file JS (dùng webpack thông qua extend(config, ctx) ) tại thư mục assets thành 1 file (file bundle chẳng hạn),
nhưng vẫn chưa được, :
Mình phải nghiên cứu thêm mới được.
Cảm ơn bạn đã giúp mình.
@lehoangnnx nếu tại assets thì bạn chỉ cần viết các file js custom thông thường thôi. mà thường thì ta sẽ viết js vào phần script của các file .vue trong thư mục của project. Còn nếu bạn add thư viện bên thứ 3 bằng webpack thì chỉ cần tại thư mục của project, bạn chạy yarn add là tự động thư viện được thêm vào thư mục node_modules và chỉ việc load từ đấy ra.
à nếu câu 1 của mình đúng thì bạn accept answer giúp mình nhe @lehoangnnx
@devil_boom_129 như bạn nói ấy, thì thường sẽ viết script vào file .vue
nhưng do đây là template HTML/JS có sẵn ý, nên cần phải load các file JS của template.
giờ là làm sao load các file đó vào cuối file khi render, mình dùng script trong head thì oke,
nhưng có 1 file bên trong lại dùng require nên phải dùng webpack để buil,
mình mới tìm hiểu nuxt và webpack nên không rành lắm, phải tìm hiểu thêm mới được
Cảm ơn bạn nha.
+2
còn về vế 1 của bạn thì giống lỗi này
https://stackoverflow.com/questions/47342479/how-to-load-local-js-file-with-nuxt
Và cách giải quyết trong ấy hơi nhỏ nhưng khó nhìn: bạn đổi thành '/js/EEEEEE.js' thôi
+1
head: {
script:[
{
src:"https://code.jquery.com/jquery-3.4.1.min.js",
type: "text/javascript"
},
{
src:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
type: "text/javascript"
},
{
type: 'text/javascript',
src: '/js/refresh.magic.js', /* đường dẫn thư mục static/js/... */
body: true,
},
]
},Cảm ơn bạn. Nhưng cách này đâu dùng cho file kiểu như:
/*
** assets/js/main.js
*/
require('./a.js')
require('./b.js)
console.log('File JS main');
đúng không bạn? Có require .
Mình vẫn chưa hiểu làm sao build file JS của mình trên NuxtJS nữa 
@lehoangnnx trong file js thì bạn require thoải mái mà. require cũng chẳng qua là 1 đoạn script - nhưng dc viết ra file khác để dễ quản lý và chuyên biệt tính năng. require('./a.js') require('./b.js) tương đương với 1 file mà bạn copy cả a và b vào
@tuananhbfs ủa mà cách thêm js vào phần script trên head nó có hiểu require không ta, để mình thử xem. tại mình nghĩ require thì phải build mới được.
@lehoangnnx à sorry bạn. dùng import thay cho require nhé
@tuananhbfs oke cảm ơn bạn nha, để mình làm thử xem sao.
