Skip to content

Instantly share code, notes, and snippets.

@r7kamura
Last active Mar 19, 2021
Embed
What would you like to do?
Migration from Sprockets to Webpack

Directory structure

Before

.
|-- app/
|   `-- assets/
|       |-- fonts/
|       |-- images/
|       |-- javascripts/
|       `-- stylesheets/
`-- public/
    `-- assets/

After

.
|-- client/
|   |-- fonts/
|   |-- images/
|   |-- javascripts/
|   |-- stylesheets/
|   |-- package-lock.json
|   |-- package.json
|   |-- webpack.config.common.js
|   |-- webpack.config.development.js
|   `-- webpack.config.production.js
`-- public/
    `-- assets/
version: '2.0'
services:
node:
image: node:10.15.0
volumes:
- .:/app:cached
- node-modules:/app/client/node_modules
working_dir: /app/client
volumes:
node-modules:
{
"devDependencies": {
"coffee-loader": "0.9.0",
"coffeescript": "2.3.2",
"copy-webpack-plugin": "4.6.0",
"css-loader": "2.1.0",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "4.11.0",
"sass-loader": "7.1.0",
"webpack": "4.17.2",
"webpack-cli": "3.2.1",
"webpack-fix-style-only-entries": "0.1.0",
"webpack-manifest-plugin": "2.0.4",
"webpack-merge": "4.2.1"
},
"scripts": {
"build": "webpack --config webpack.config.production.js",
"watch": "webpack --config webpack.config.development.js --watch"
},
"dependencies": {
"jquery": "2.1.3"
}
}
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: {
'application': [
'./javascripts/application.js',
'./stylesheets/application.scss'
],
'foo': './stylesheets/foo.scss',
'bar': [
'./javascripts/bar.coffee',
'./stylesheets/bar.scss',
],
},
module: {
rules: [
{
test: /\.coffee$/,
use: [
'coffee-loader'
]
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false
}
},
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'stylesheets/vendor')
]
}
}
]
}
]
},
resolve: {
extensions: [
'.coffee',
'.js',
'.scss'
]
}
};
const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.config.common.js');
const merge = require('webpack-merge');
const path = require('path');
module.exports = merge(
common,
{
mode: 'development',
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../public/assets')
},
plugins: [
new CopyWebpackPlugin([
{
from: 'fonts/',
to: '[path][name].[ext]'
},
{
from: 'images/',
to: '[path][name].[ext]'
}
]),
new FixStyleOnlyEntriesPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
}
)
const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.config.common.js');
const merge = require('webpack-merge');
const path = require('path');
module.exports = merge(
common,
{
mode: 'production',
output: {
filename: '[name]-[hash].js',
path: path.resolve(__dirname, '../public/assets')
},
plugins: [
new ManifestPlugin({
fileName: 'webpack-manifest.json',
map: (file) => {
file.name = file.name.replace(/(-[a-f0-9]{32})(\..+)$/, '$2');
return file;
}
}),
new CopyWebpackPlugin([
{
from: 'fonts/',
to: '[path][name]-[hash].[ext]'
},
{
from: 'images/',
to: '[path][name]-[hash].[ext]'
}
]),
new FixStyleOnlyEntriesPlugin(),
new MiniCssExtractPlugin({
filename: '[name]-[hash].css'
})
],
}
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment