Skip to content

Commit

Permalink
transition to webpack 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheTrio
TheTrio committed May 23, 2022
1 parent b76eba5 commit 55702db
Show file tree
Hide file tree
Showing 8 changed files with 1,034 additions and 1,948 deletions.
4 changes: 2 additions & 2 deletions app/assets/stylesheets/survey_modules/question-types.styl
View file
Expand Up @@ -36,7 +36,7 @@

.question-type--select .survey__question-text:after
content ''
background url('/assets/chosen-sprite.png') no-repeat
background url('../images/chosen-sprite.png') no-repeat
position absolute
left 130px
z-index 5
Expand Down Expand Up @@ -241,7 +241,7 @@
line-height 28px
font-weight 600
font-size 15px
background-image url('/assets/images/uiSlider-Handle-Background.png')
background-image url('../images/uiSlider-Handle-Background.png')
background-repeat no-repeat
background-position center
background-size contain
Expand Down
16 changes: 8 additions & 8 deletions app/assets/stylesheets/survey_modules/vendor/chosen.css
View file
Expand Up @@ -103,7 +103,7 @@ This file is generated by `grunt build`, do not edit it by hand.
display: block;
width: 12px;
height: 12px;
background: url('/assets/images/chosen-sprite.png') -42px 1px no-repeat;
background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
Expand All @@ -124,7 +124,7 @@ This file is generated by `grunt build`, do not edit it by hand.
display: block;
width: 100%;
height: 100%;
background: url('/assets/images/chosen-sprite.png') no-repeat -2px 10px;
background: url('../images/chosen-sprite.png') no-repeat -2px 10px;
background-size: 56px 41px;
}
.chosen-container-single .chosen-search {
Expand All @@ -141,8 +141,8 @@ This file is generated by `grunt build`, do not edit it by hand.
height: auto;
outline: 0;
border: 1px solid #aaa;
background: white url('/assets/images/chosen-sprite.png') no-repeat 100% -20px;
background: url('/assets/images/chosen-sprite.png') no-repeat 100% -20px;
background: white url('../images/chosen-sprite.png') no-repeat 100% -20px;
background: url('../images/chosen-sprite.png') no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
Expand Down Expand Up @@ -287,7 +287,7 @@ This file is generated by `grunt build`, do not edit it by hand.
display: block;
width: 12px;
height: 12px;
background: url('/assets/images/chosen-sprite.png') -42px 1px no-repeat;
background: url('../images/chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
Expand Down Expand Up @@ -424,8 +424,8 @@ This file is generated by `grunt build`, do not edit it by hand.
}
.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
background: white url('/assets/images/chosen-sprite.png') no-repeat -30px -20px;
background: url('/assets/images/chosen-sprite.png') no-repeat -30px -20px;
background: white url('../images/chosen-sprite.png') no-repeat -30px -20px;
background: url('../images/chosen-sprite.png') no-repeat -30px -20px;
direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
Expand All @@ -445,7 +445,7 @@ This file is generated by `grunt build`, do not edit it by hand.
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
background-image: url('/assets/images/chosen-sprite@2x.png') !important;
background-image: url('../images/chosen-sprite@2x.png') !important;
background-size: 56px 41px !important;
background-repeat: no-repeat !important;
}
Expand Down
4 changes: 2 additions & 2 deletions app/helpers/application_helper.rb
View file
Expand Up @@ -42,13 +42,13 @@ def hot_javascript_path(filename)
end

def fingerprinted(path, filename, file_prefix = nil)
manifest_path = "#{Rails.root}/public/#{path}/js-manifest.json"
manifest_path = "#{Rails.root}/public/#{path}/manifest.json"
manifest = Oj.load(File.read(File.expand_path(manifest_path, __FILE__)))
"#{file_prefix}#{manifest[filename + '.js']}"
end

def css_fingerprinted(filename, file_prefix = '')
manifest_path = "#{Rails.root}/public/assets/javascripts/css-manifest.json"
manifest_path = "#{Rails.root}/public/assets/javascripts/manifest.json"
manifest = Oj.load(File.read(File.expand_path(manifest_path, __FILE__)))
"/assets/stylesheets/#{manifest[file_prefix + filename + '.css'].split('/').last}"
end
Expand Down
59 changes: 6 additions & 53 deletions css.webpack.js
View file
@@ -1,13 +1,9 @@
const path = require('path');
const config = require('./config');
const ExcludeAssetsPlugin = require('webpack-exclude-assets-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
const webpack = require('webpack');

const cssSource = `./${config.sourcePath}/${config.cssDirectory}`;
const appRoot = path.resolve('./');

const entry = {
main: [`${cssSource}/main.styl`],
styleguide: [`${cssSource}/styleguide.styl`],
Expand All @@ -16,35 +12,16 @@ const entry = {
};

module.exports = (env) => {
const doHot = env.development && !env.watch_js;
const mode = env.development ? 'development' : 'production';
const outputPath = doHot
? path.resolve(appRoot, `${config.outputPath}/${config.jsDirectory}`)
: path.resolve(`${config.outputPath}/${config.jsDirectory}`);

return {
mode,
entry,
output: {
path: outputPath,
filename: doHot ? '[name].styl' : '[name].[chunkhash].styl',
publicPath: '/',
},
resolve: {
extensions: ['.styl'],
symlinks: false,
},
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !!env.development
}
},
MiniCssExtractPlugin.loader,
'css-loader',
{
// Compiles Stylus to CSS
Expand All @@ -57,48 +34,24 @@ module.exports = (env) => {
]
},
{
// this inlines resources if they are less than 8KB
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
loader: 'url-loader',
options: {
limit: 8192,
},
type: 'asset'
}
]
},
plugins: [
// extracts CSS to a separate file
new MiniCssExtractPlugin({
filename: env.development ? '../stylesheets/[name].css' : '../stylesheets/[name].[hash].css',
filename: env.development ? '../stylesheets/[name].css' : '../stylesheets/[name].[contenthash].css',
}),
// generates a RTL version of the emitted CSS files
// this is done only in production
// this is done only in production/coverage
...(env.production || env.coverage ? [new WebpackRTLPlugin({
filename: '../stylesheets/rtl-[name].[contenthash].css'
})] : []),
// css-loader generates unnecesary js files (but with .styl extension)
// the following will remove that
new ExcludeAssetsPlugin({
path: ['^.*\\.styl$']
}),
// manifest file
new ManifestPlugin({
fileName: 'css-manifest.json',
map: (file) => {
if (/rtl-.*\.css$/.test(file.path)) {
file.name = `rtl-${file.name}`;
}
return file;
}
}),
// node environment
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(mode),
},
})
],
watch: env.watch_js,
devtool: env.development ? 'eval' : 'source-map',
stats: 'minimal',
};
};
35 changes: 9 additions & 26 deletions js.webpack.js
View file
@@ -1,13 +1,12 @@
const path = require('path');
const config = require('./config');
const ManifestPlugin = require('webpack-manifest-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const webpack = require('webpack');

const jsSource = `./${config.sourcePath}/${config.jsDirectory}`;
const appRoot = path.resolve('./');

const entry = {
main: [`${jsSource}/main.js`],
sentry: [`${jsSource}/sentry.js`],
Expand All @@ -24,37 +23,31 @@ const entry = {

module.exports = (env) => {
const doHot = env.development && !env.watch_js;
const mode = env.development ? 'development' : 'production';
const outputPath = doHot
? path.resolve(appRoot, `${config.outputPath}/${config.jsDirectory}`)
: path.resolve(`${config.outputPath}/${config.jsDirectory}`);
const devtool = env.coverage ? 'cheap-module-source-map' : 'cheap-eval-source-map';
const devtool = env.production ? 'source-map' : 'eval-cheap-module-source-map';
if (env.coverage) {
// In coverage mode, every React component should
// be bundled within main.js
entry.main = [`${jsSource}/main-coverage.js`];
}

return {
mode,
entry,
output: {
path: outputPath,
filename: doHot ? '[name].js' : '[name].[chunkhash].js',
publicPath: '/assets/javascripts/',
},
resolve: {
extensions: ['.js', '.jsx'],
symlinks: false
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/vendor/, /node_modules(?!\/striptags)/],
include: path.resolve(__dirname, 'app/assets/javascripts'),
use: {
loader: 'babel-loader',
query: {
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
Expand All @@ -66,16 +59,6 @@ module.exports = (env) => {
'i18n-js': 'I18n'
},
plugins: [
// manifest file
new ManifestPlugin({
fileName: 'js-manifest.json'
}),
// node environment
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(mode),
},
}),
// Creates smaller Lodash builds by replacing feature sets of modules with noop,
// identity, or simpler alternatives.
new LodashModuleReplacementPlugin(config.requiredLodashFeatures),
Expand All @@ -84,13 +67,13 @@ module.exports = (env) => {
extensions: ['js', 'jsx'],
exclude: ['vendor', 'node_modules'],
cache: true,
failOnError: !!env.production
})
failOnError: !!env.production,
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
defaultVendors: {
test: /[\\/]node_modules[\\/]((?!(chart)).*)[\\/]/,
chunks: chunk => !/tinymce/.test(chunk.name),
name: 'vendors'
Expand All @@ -101,7 +84,7 @@ module.exports = (env) => {
watch: env.watch_js,
// eval causes trouble with instrumenting and outputs the transformed code which is not useful with coverage data
// cheap-module-source-map outputs an almost original code at the best possible speed which helps in evaluating the coverage data
devtool: env.development ? devtool : 'source-map',
devtool,
stats: env.stats ? 'normal' : 'minimal',
};
};
Expand Down
22 changes: 10 additions & 12 deletions package.json
View file
Expand Up @@ -24,7 +24,7 @@
"core-js": "^3.21.1",
"create-react-class": "^15.7.0",
"cross-fetch": "^3.1.5",
"css-loader": "^3.5.3",
"css-loader": "^6.7.1",
"deep-freeze": "^0.0.1",
"del": "^6.0.0",
"enzyme": "^3.11.0",
Expand All @@ -50,7 +50,7 @@
"markdown-it": "^12.3.2",
"markdown-it-footnote": "^3.0.2",
"merge-stream": "^2.0.0",
"mini-css-extract-plugin": "^0.9.0",
"mini-css-extract-plugin": "^2.6.0",
"mkdirp": "^1.0.4",
"moment": "2.29.3",
"moment-locales-webpack-plugin": "^1.2.0",
Expand Down Expand Up @@ -102,22 +102,20 @@
"velocity-animate": "^1.5.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"webpack": "^4.44.1",
"webpack": "^5.72.1",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-dev-server": "^3.10.3",
"webpack-exclude-assets-plugin": "^0.1.1",
"webpack-manifest-plugin": "2.2.0",
"webpack-dev-server": "^4.9.0",
"webpack-manifest-plugin": "^5.0.0",
"webpack-rtl-plugin": "^2.0.0",
"wnumb": "^1.2.0"
},
"scripts": {
"test": "jest",
"lint-non-build": "eslint 'test/**/*.{jsx,js}' '*.js'",
"start": "node prepare.js && parallel-webpack --config=webpack.multi.js -m=0 --watch -- --env.development --env.watch_js",
"coverage": "node prepare.js && parallel-webpack --config=webpack.multi.js -m=0 -- --env.development --env.coverage",
"hot": "node prepare.js && webpack-dev-server --env.development",
"build": "node prepare.js && parallel-webpack --config=webpack.multi.js -m=0 -- --env.production",
"analyze": "webpack --env.production --env.stats --profile --json > stats.json && webpack-bundle-analyzer stats.json public/assets/javascripts"
"start": "node prepare.js && webpack serve --env development --client-overlay --client-progress --progress",
"coverage": "node prepare.js && webpack build --env development --env coverage",
"build": "node prepare.js && webpack build --env production --node-env production",
"analyze": "webpack --env production --env stats --profile --json > stats.json && webpack-bundle-analyzer stats.json public/assets/javascripts"
},
"engines": {
"yarn": ">= 1.0.0"
Expand All @@ -127,7 +125,7 @@
"@babel/plugin-transform-runtime": "^7.9.0",
"babel-plugin-root-import": "^6.5.0",
"eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
"eslint-webpack-plugin": "2",
"eslint-webpack-plugin": "^3.1.1",
"parallel-webpack": "^2.6.0",
"stylus-native-loader": "^1.1.2",
"webpack-cli": "^4.9.0"
Expand Down

0 comments on commit 55702db

Please sign in to comment.