https://viblo.asia/p/webpack-tu-a-den-a-webpack-import-jquery-XL6lA94rlek
6
+2kentrung @trungnt256Follow 275 7 23Published Aug 7th, 3:53 PM 2 min read221 0 0
Last updated
<script src="jquery.js"></script>const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: [
'./src/a.js',
'./src/b.js'
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack từ A đến Á cùng kentrung</title>
</head>
<body>
<h1>Webpack từ A đến Á cùng kentrung</h1>
<script src="main.js"></script>
</body>
</html>$('h1').css('color', 'white')$('h1').css('background', 'purple')Uncaught ReferenceError: $ is not defined at (a.js:1)npm install jqueryimport $ from 'jquery'
$('h1').css('color', 'white')Uncaught ReferenceError: $ is not defined at (b.js:1)import $ from 'jquery'
$('h1').css('background', 'purple')const path = require('path')
const webpack = require('webpack')
module.exports = {
mode: 'development',
entry: {
main: [
'./src/a.js',
'./src/b.js'
]
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}$('h1').css('color', 'white')$('h1').css('background', 'purple')