Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack 3 configuration for Dovetail
// Common configuration for webpacker loaded from config/webpack/paths.yml
const { join, resolve } = require("path");
const { env } = require("process");
const { safeLoad } = require("js-yaml");
const { readFileSync } = require("fs");
const configPath = resolve("config", "webpack");
const loadersDir = join(__dirname, "loaders");
const paths = safeLoad(readFileSync(join(configPath, "paths.yml"), "utf8"))[env.NODE_ENV];
const devServer = safeLoad(readFileSync(join(configPath, "development.server.yml"), "utf8"))[env.NODE_ENV];
// Compute public path based on environment and ASSET_HOST in production
const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === "production";
const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`;
const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`;
const publicPath = env.NODE_ENV !== "production" ? devServerUrl : publicUrl;
module.exports = {
devServer,
env,
paths,
loadersDir,
publicUrl,
publicPath
};
// Note: You must restart bin/webpack-dev-server for changes to take effect
const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');
module.exports = merge(sharedConfig, {
devtool: 'sourcemap',
stats: {
errorDetails: true,
},
output: {
pathinfo: true,
},
});
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
config: config/webpack
entry: packs
output: public
manifest: manifest.json
node_modules: node_modules
source: app/javascript
extensions:
- .js
- .jsx
- .ts
- .tsx
- .svg.tsx
- .vue
- .png
- .gif
- .jpeg
- .jpg
development:
<<: *default
test:
<<: *default
manifest: manifest-test.json
production:
<<: *default
// Note: You must restart bin/webpack-dev-server for changes to take effect
/* eslint global-require: 0 */
const webpack = require("webpack");
const merge = require("webpack-merge");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const sharedConfig = require("./shared.js");
// Emit source map for bundle analysis as well as Sentry stack traces.
const emitSourceMap = true;
module.exports = merge(sharedConfig, {
devtool: emitSourceMap ? "sourcemap" : "none",
output: { filename: "[name]-[chunkhash].js" },
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
beautify: false,
ecma: 6,
compress: {
// Function inlining is broken (does not properly use unique
// identifiers) and must be restricted only to "simple functions".
// See https://github.com/mishoo/UglifyJS2/issues/2842
inline: 1
},
comments: false,
sourceMap: emitSourceMap
}
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|css|eot|ttf|woff|woff2)$/
})
]
});
// Note: You must restart bin/webpack-dev-server for changes to take effect
/* eslint global-require: 0 */
/* eslint import/no-dynamic-require: 0 */
const { TsConfigPathsPlugin } = require("awesome-typescript-loader");
const webpack = require("webpack");
const { basename, dirname, join, relative, resolve } = require("path");
const { sync } = require("glob");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const extname = require("path-complete-extname");
const { env, paths, publicPath, loadersDir, tsconfigPath } = require("./configuration.js");
const extensionGlob = `**/*{${paths.extensions.join(",")}}*`;
const packPaths = sync(join(paths.source, paths.entry, extensionGlob));
module.exports = {
entry: packPaths.reduce((map, entry) => {
const localMap = map;
const namespace = relative(join(paths.source, paths.entry), dirname(entry));
localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
return localMap;
}, {}),
output: {
filename: "[name].js",
path: resolve(paths.output, paths.entry),
publicPath
},
module: {
rules: sync(join(loadersDir, "*.js")).map(loader => require(loader))
},
plugins: [
new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
new ExtractTextPlugin(env.NODE_ENV === "production" ? "[name]-[hash].css" : "[name].css"),
new webpack.optimize.ModuleConcatenationPlugin(),
new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
],
resolve: {
extensions: paths.extensions,
modules: [resolve(paths.source), resolve(paths.node_modules)],
plugins: [new TsConfigPathsPlugin({ configFileName: "tsconfig.json" })]
},
resolveLoader: {
modules: [paths.node_modules]
}
};
// Note: You must restart bin/webpack-dev-server for changes to take effect
const merge = require('webpack-merge');
const sharedConfig = require('./shared.js');
module.exports = merge(sharedConfig, {});
#!/usr/bin/env ruby
$stdout.sync = true
require "shellwords"
require "yaml"
ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]
APP_PATH = File.expand_path("../", __dir__)
CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
begin
paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
NODE_MODULES_PATH = File.join(APP_PATH.shellescape, paths["node_modules"])
WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
rescue Errno::ENOENT, NoMethodError
puts "Configuration not found in config/webpack/paths.yml"
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end
WEBPACK_BIN = "#{NODE_MODULES_PATH}/.bin/webpack"
WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
Dir.chdir(APP_PATH) do
exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
" #{ARGV.join(" ")}"
end
#!/usr/bin/env ruby
$stdout.sync = true
require "shellwords"
require "yaml"
ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]
APP_PATH = File.expand_path("../", __dir__)
CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
begin
paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
NODE_MODULES_PATH = File.join(APP_PATH.shellescape, paths["node_modules"])
WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
WEBPACK_BIN = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
rescue Errno::ENOENT, NoMethodError
puts "Configuration not found in config/webpacker/paths.yml."
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end
Dir.chdir(APP_PATH) do
exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
"--config #{DEV_SERVER_CONFIG} #{ARGV.join(" ")}"
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.