Ruby on rails学习：移除 webpacker

从 rails 项目中移除 webpacker，直接使用 webpack

背景

因为 webpacker 已经被 rails7 给淘汰掉了，另外 node-sass 安装问题实在有点多。

添加 jsbundling-rails

• Gemfile 中添加 gem 'jsbundling-rails'
• 运行 ./bin/bundle install
• 运行 ./bin/rails javascript:install:webpack

移动 webpack 配置

• Move ./webpack.config.js into ./config/webpack/
• npm scripts 中添加 "build": "webpack --config ./config/webpack/webpack.config.js"
• 修改 wepack.config.js 中的配置 path: path.resolve(__dirname, '..', '..', 'app/assets/builds')

移除相关路径

• 移除文件
• 移除相关配置
  • 配置1: node_modules 相关
  • 配置2: 我一般没有动过，所以没有这个配置
• 移除 gem gem 'webpacker'
• 运行 ./bin/bundle install
• 移除不必要的 packages:
• 删除 babel.config.js

./bin/webpack
./bin/webpack-dev-server
./config/initializers/webpacker.rb
./config/webpacker.yml
./config/webpack/development.js
./config/webpack/environment.js
./config/webpack/production.js
./config/webpack/test.js

# Remove from your config/initializers/assets.rb
-# Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')

# Remove from your config/initializers/content_security_policy.rb
-#   # If you are using webpack-dev-server then specify webpack-dev-server host
-#   policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

yarn remove @rails/webpacker webpack-dev-server

babel 的处理

• 移除 babel.config.js
• 添加新的 babel 包，及配置

yarn add @babel/core @babel/preset-env babel-loader

// In package.json, add
+ "babel": {
+   "presets": ["@babel/preset-env"]
+ }

// in webpack.config.js, add
module.exports = {
  module: {
    rules: [
+       {
+         test: /\.(js)$/,
+         exclude: /node_modules/,
+         use: ['babel-loader'],
+       },
    ],
  },
};

CSS + SASS 配置

# From the CLI, add loaders, plugins, and node sass
yarn add css-loader sass sass-loader mini-css-extract-plugin webpack-remove-empty-scripts

// In webpack.config.js

// Extracts CSS into .css file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// Removes exported JavaScript files from CSS-only entries
// in this example, entry.custom will create a corresponding empty custom.js file
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    // add your css or sass entries
    application: [
      './app/assets/javascripts/application.js',
      './app/assets/stylesheets/application.scss',
    ],
    custom: './app/assets/stylesheets/custom.scss',
  },
  module: {
    rules: [
      // Add CSS/SASS/SCSS rule with loaders
      {
        test: /\.(?:sa|sc|c)ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  resolve: {
    // Add additional file types
    extensions: ['.js', '.jsx', '.scss', '.css'],
  },
  plugins: [
    // Include plugins
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin(),
  ],
};

测试编译过程

yarn build --progress --color

替换 webpacker 相关的 tag

# Webpacker tag       # Sprockets tag
javascript_pack_tag = javascript_include_tag
stylesheet_pack_tag = stylesheet_link_tag

添加环境相关的配置 optional

// Make the following changes in webpack.config.js
+ const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';

module.exports = {
-  mode: "production",
+  mode,
-  devtool: "source-map",
  …
+  optimization: {
+    moduleIds: 'hashed',
+  }
}

参考

• https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md