与Webpack一起使用Rails

与Webpack一起使用Rails可以让你在Rails应用程序中利用Webpack的强大功能来管理和打包前端资源，如JavaScript、CSS和其他静态文件。以下是一个基本的指南，帮助你在Rails项目中集成Webpack。

1. 创建一个新的Rails项目（如果还没有）

rails new myapp
cd myapp

2. 添加Webpacker gem

Webpacker是一个Rails引擎，简化了在Rails应用程序中使用Webpack的过程。首先，将Webpacker添加到你的Gemfile中：

gem 'webpacker', '~> 5.0'

然后运行：

bundle install

3. 初始化Webpacker

运行以下命令来初始化Webpacker：

bundle exec rails webpacker:install

这将会：

• 安装Webpack和相关的npm包。
• 创建一个app/javascript目录，并在其中生成一些初始文件。
• 更新你的config/webpack/environment.js文件，以便你可以自定义Webpack配置。

4. 添加JavaScript模块

你可以在app/javascript/packs目录下添加JavaScript模块。例如，创建一个hello_react.jsx文件：

import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', () => {
  const app = document.createElement('div');
  app.id = 'root';
  document.body.appendChild(app);

  ReactDOM.render(<h1>Hello, world!</h1>, app);
});

5. 在Rails视图中使用打包后的JavaScript

Webpacker会自动为你生成打包后的JavaScript文件，并将其放置在public/packs目录下。你可以在Rails视图中引用这些文件：

<%= javascript_pack_tag 'hello_react' %>

6. 自定义Webpack配置

如果你需要自定义Webpack配置，可以在config/webpack目录下创建自定义配置文件。例如，创建一个config/webpack/custom.js文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

然后在config/webpack/environment.js中引入自定义配置：

const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

environment.config.merge(customConfig)

module.exports = environment

7. 运行Webpacker开发服务器

你可以使用Webpacker的开发服务器来实时编译和热重载你的JavaScript代码：

bundle exec rails webpacker:serve

这将会启动一个开发服务器，并在你修改JavaScript文件时自动重新编译。

总结

通过以上步骤，你已经成功地在Rails项目中集成了Webpack。你现在可以利用Webpack的强大功能来管理和打包前端资源，包括JavaScript模块、CSS预处理器、图片和其他静态文件。