From 53e42bf91ef2c705168f8d04b9374c349ec14074 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sun, 18 Jun 2017 09:57:09 +0900 Subject: Upgrade Webpacker to version 2.0 (#3729) --- config/webpack/configuration.js | 35 ++++++++++++++++++++++------------- config/webpack/development.js | 16 ++++++++++++++++ config/webpack/development.server.js | 20 -------------------- config/webpack/development.server.yml | 17 ----------------- config/webpack/loaders/sass.js | 3 ++- config/webpack/paths.yml | 29 ----------------------------- config/webpack/production.js | 15 ++++++++------- config/webpack/shared.js | 32 ++++++++++++++++++-------------- 8 files changed, 66 insertions(+), 101 deletions(-) delete mode 100644 config/webpack/development.server.js delete mode 100644 config/webpack/development.server.yml delete mode 100644 config/webpack/paths.yml (limited to 'config/webpack') diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js index 2a54080cf..6ef484c3a 100644 --- a/config/webpack/configuration.js +++ b/config/webpack/configuration.js @@ -1,26 +1,35 @@ -// Common configuration for webpacker loaded from config/webpack/paths.yml +// Common configuration for webpacker loaded from config/webpacker.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 configPath = resolve('config', 'webpacker.yml'); const loadersDir = join(__dirname, 'loaders'); -const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV || 'development']; -const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV || 'development']; +const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]; -// Compute public path based on environment and CDN_HOST in production -const ifHasCDN = env.CDN_HOST !== undefined && env.NODE_ENV === 'production'; -const devServerUrl = `http://${env.LOCAL_DOMAIN || devServer.host}:${devServer.port}/${paths.entry}/`; -const publicUrl = ifHasCDN ? `${env.CDN_HOST}/${paths.entry}/` : `/${paths.entry}/`; -const publicPath = env.NODE_ENV !== 'production' ? devServerUrl : publicUrl; +function removeOuterSlashes(string) { + return string.replace(/^\/*/, '').replace(/\/*$/, ''); +} + +function formatPublicPath(host = '', path = '') { + let formattedHost = removeOuterSlashes(host); + if (formattedHost && !/^http/i.test(formattedHost)) { + formattedHost = `//${formattedHost}`; + } + const formattedPath = removeOuterSlashes(path); + return `${formattedHost}/${formattedPath}/`; +} + +const output = { + path: resolve('public', settings.public_output_path), + publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path), +}; module.exports = { - devServer, + settings, env, - paths, loadersDir, - publicUrl, - publicPath, + output, }; diff --git a/config/webpack/development.js b/config/webpack/development.js index f6235f42e..7fce7e3f9 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -2,6 +2,7 @@ const merge = require('webpack-merge'); const sharedConfig = require('./shared.js'); +const { settings, output } = require('./configuration.js'); module.exports = merge(sharedConfig, { devtool: 'cheap-module-eval-source-map', @@ -13,4 +14,19 @@ module.exports = merge(sharedConfig, { output: { pathinfo: true, }, + + devServer: { + clientLogLevel: 'none', + https: settings.dev_server.https, + host: settings.dev_server.host, + port: settings.dev_server.port, + contentBase: output.path, + publicPath: output.publicPath, + compress: true, + headers: { 'Access-Control-Allow-Origin': '*' }, + historyApiFallback: true, + watchOptions: { + ignored: /node_modules/, + }, + }, }); diff --git a/config/webpack/development.server.js b/config/webpack/development.server.js deleted file mode 100644 index 8e8a399e8..000000000 --- a/config/webpack/development.server.js +++ /dev/null @@ -1,20 +0,0 @@ -// Note: You must restart bin/webpack-dev-server for changes to take effect - -const { resolve } = require('path'); -const { env } = require('process'); -const merge = require('webpack-merge'); -const devConfig = require('./development.js'); -const { devServer, publicPath, paths } = require('./configuration.js'); - -module.exports = merge(devConfig, { - devServer: { - host: env.LOCAL_DOMAIN ? '0.0.0.0' : devServer.host, - port: devServer.port, - headers: { 'Access-Control-Allow-Origin': '*' }, - compress: true, - historyApiFallback: true, - contentBase: resolve(paths.output, paths.entry), - publicPath, - disableHostCheck: true, - }, -}); diff --git a/config/webpack/development.server.yml b/config/webpack/development.server.yml deleted file mode 100644 index ee588a888..000000000 --- a/config/webpack/development.server.yml +++ /dev/null @@ -1,17 +0,0 @@ -# Note: You must restart bin/webpack-dev-server for changes to take effect - -default: &default - enabled: true - host: localhost - port: 8080 - -development: - <<: *default - -test: - <<: *default - enabled: false - -production: - <<: *default - enabled: false diff --git a/config/webpack/loaders/sass.js b/config/webpack/loaders/sass.js index 24abf1685..88d94c684 100644 --- a/config/webpack/loaders/sass.js +++ b/config/webpack/loaders/sass.js @@ -7,7 +7,8 @@ module.exports = { fallback: 'style-loader', use: [ { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } }, - 'postcss-loader', + { loader: 'postcss-loader', options: { sourceMap: true } }, + 'resolve-url-loader', 'sass-loader', ], }), diff --git a/config/webpack/paths.yml b/config/webpack/paths.yml deleted file mode 100644 index fdae76141..000000000 --- a/config/webpack/paths.yml +++ /dev/null @@ -1,29 +0,0 @@ -# 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 - - .sass - - .scss - - .css - - .png - - .svg - - .gif - - .jpeg - - .jpg - -development: - <<: *default - -test: - <<: *default - manifest: manifest-test.json - -production: - <<: *default diff --git a/config/webpack/production.js b/config/webpack/production.js index 755464061..303fca81b 100644 --- a/config/webpack/production.js +++ b/config/webpack/production.js @@ -7,26 +7,27 @@ const sharedConfig = require('./shared.js'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = merge(sharedConfig, { - - devtool: 'source-map', // separate sourcemap file, suitable for production - output: { filename: '[name]-[chunkhash].js' }, + devtool: 'source-map', // separate sourcemap file, suitable for production + stats: 'normal', plugins: [ new webpack.optimize.UglifyJsPlugin({ - compress: true, + sourceMap: true, mangle: true, + compress: { + warnings: false, + }, + output: { comments: false, }, - - sourceMap: true, }), new CompressionPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', - test: /\.(js|css|svg|eot|ttf|woff|woff2)$/, + test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/, }), new BundleAnalyzerPlugin({ // generates report.html and stats.json analyzerMode: 'static', diff --git a/config/webpack/shared.js b/config/webpack/shared.js index de57ecb68..4d865b816 100644 --- a/config/webpack/shared.js +++ b/config/webpack/shared.js @@ -7,21 +7,22 @@ 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 } = require('./configuration.js'); +const { env, settings, output, loadersDir } = require('./configuration.js'); const localePackPaths = require('./generateLocalePacks'); -const extensionGlob = `**/*{${paths.extensions.join(',')}}*`; -const packPaths = sync(join(paths.source, paths.entry, extensionGlob)); -const entryPacks = [].concat(packPaths).concat(localePackPaths).filter(path => path !== join(paths.source, paths.entry, 'custom.js')); +const extensionGlob = `**/*{${settings.extensions.join(',')}}*`; +const entryPath = join(settings.source_path, settings.source_entry_path); +const packPaths = sync(join(entryPath, extensionGlob)); +const entryPacks = [...packPaths, ...localePackPaths].filter(path => path !== join(entryPath, 'custom.js')); -const customApplicationStyle = resolve(join(paths.source, 'styles/custom.scss')); -const originalApplicationStyle = resolve(join(paths.source, 'styles/application.scss')); +const customApplicationStyle = resolve(join(settings.source_path, 'styles/custom.scss')); +const originalApplicationStyle = resolve(join(settings.source_path, 'styles/application.scss')); module.exports = { entry: entryPacks.reduce( (map, entry) => { const localMap = map; - let namespace = relative(join(paths.source, paths.entry), dirname(entry)); + let namespace = relative(join(entryPath), dirname(entry)); if (namespace === join('..', '..', '..', 'tmp', 'packs')) { namespace = ''; // generated by generateLocalePacks.js } @@ -33,8 +34,8 @@ module.exports = { output: { filename: '[name].js', chunkFilename: '[name]-[chunkhash].js', - path: resolve(paths.output, paths.entry), - publicPath, + path: output.path, + publicPath: output.publicPath, }, module: { @@ -44,7 +45,10 @@ module.exports = { plugins: [ new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))), new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'), - new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true }), + new ManifestPlugin({ + publicPath: output.publicPath, + writeToFileEmit: true, + }), new webpack.optimize.CommonsChunkPlugin({ name: 'common', minChunks: (module, count) => { @@ -67,15 +71,15 @@ module.exports = { 'mastodon-application-style': existsSync(customApplicationStyle) ? customApplicationStyle : originalApplicationStyle, }, - extensions: paths.extensions, + extensions: settings.extensions, modules: [ - resolve(paths.source), - resolve(paths.node_modules), + resolve(settings.source_path), + 'node_modules', ], }, resolveLoader: { - modules: [paths.node_modules], + modules: ['node_modules'], }, node: { -- cgit