Я настроил новое приложение Rails 6 для работы с tailwindcss, и я впервые испытал правильное использование webpack.Я пытаюсь использовать jquery и хочу убедиться, что любая ссылка на $ или jquery в моих сценариях поддерживается должным образом
Я следовал инструкциям для установки пакета jquery-ui, которыйпотребовал, чтобы я создал файл webpack.config.js, но, похоже, он не будет работать, пока я не определю теги jquery в application.js.
Хотя это временно решает мою проблему, я хочу убедиться, что webpack.config.js правильно настроен для будущего использования.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
index:'./src/index.js'
},
output: {
filename: 'bundled.js',
path: path.resolve(__dirname, 'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
loaders: ["style-loader","css-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader:"file-loader",
options:{
name:'[name].[ext]',
outputPath:'assets/images/'
//the images will be emited to dist/assets/images/ folder
}
}
]
},
plugins: [
/* Use the ProvidePlugin constructor to inject jquery implicit globals */
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery'",
"window.$": "jquery"
})
]
};
application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('webpack-jquery-ui');
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
package.json
{
"name": "www",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"webpack-jquery-ui": "^2.0.1",
"tailwindcss": "^1.0.3",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.7.0"
}
}