From 7e5083fb06b926d925cfff3971758a1ad5314009 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 8 Jul 2020 21:55:20 -1000 Subject: [PATCH 1/4] Only include dev-server parts if for dev server (#2644) * Only include dev-server parts if for dev server Without this change, webpack still includes things like window in the build even if not using the webpack-dev-server. When that happens, the bundle cannot be used for server-side rendering. * Linting * Add jest test --- package/__tests__/development.js | 15 +++++- package/environments/development.js | 72 ++++++++++++++++------------- 2 files changed, 53 insertions(+), 34 deletions(-) diff --git a/package/__tests__/development.js b/package/__tests__/development.js index bd1f1e8e1..0ba24270a 100644 --- a/package/__tests__/development.js +++ b/package/__tests__/development.js @@ -11,9 +11,10 @@ describe('Development environment', () => { describe('toWebpackConfig', () => { beforeEach(() => jest.resetModules()) - test('should use development config and environment', () => { + test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => { process.env.RAILS_ENV = 'development' process.env.NODE_ENV = 'development' + process.env.WEBPACK_DEV_SERVER = 'YES' const { environment } = require('../index') const config = environment.toWebpackConfig() @@ -26,5 +27,17 @@ describe('Development environment', () => { } }) }) + + test('should use development config and environment if WEBPACK_DEV_SERVER', () => { + process.env.RAILS_ENV = 'development' + process.env.NODE_ENV = 'development' + process.env.WEBPACK_DEV_SERVER = undefined + const { environment } = require('../index') + + const config = environment.toWebpackConfig() + expect(config.output.path).toEqual(resolve('public', 'packs')) + expect(config.output.publicPath).toEqual('/packs/') + expect(config.devServer).toEqual(undefined) + }) }) }) diff --git a/package/environments/development.js b/package/environments/development.js index 361efeb8d..7808fb264 100644 --- a/package/environments/development.js +++ b/package/environments/development.js @@ -7,41 +7,47 @@ module.exports = class extends Base { constructor() { super() - if (devServer.hmr) { - this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin()) - this.config.output.filename = '[name]-[hash].js' - } - this.config.merge({ mode: 'development', - devtool: 'cheap-module-source-map', - devServer: { - clientLogLevel: 'none', - compress: devServer.compress, - quiet: devServer.quiet, - disableHostCheck: devServer.disable_host_check, - host: devServer.host, - port: devServer.port, - https: devServer.https, - hot: devServer.hmr, - contentBase, - inline: devServer.inline, - useLocalIp: devServer.use_local_ip, - public: devServer.public, - publicPath, - historyApiFallback: { - disableDotRule: true - }, - headers: devServer.headers, - overlay: devServer.overlay, - stats: { - entrypoints: false, - errorDetails: true, - modules: false, - moduleTrace: false - }, - watchOptions: devServer.watch_options - } + devtool: 'cheap-module-source-map' }) + + if (process.env.WEBPACK_DEV_SERVER + && process.env.WEBPACK_DEV_SERVER !== 'undefined') { + if (devServer.hmr) { + this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin()) + this.config.output.filename = '[name]-[hash].js' + } + + this.config.merge({ + devServer: { + clientLogLevel: 'none', + compress: devServer.compress, + quiet: devServer.quiet, + disableHostCheck: devServer.disable_host_check, + host: devServer.host, + port: devServer.port, + https: devServer.https, + hot: devServer.hmr, + contentBase, + inline: devServer.inline, + useLocalIp: devServer.use_local_ip, + public: devServer.public, + publicPath, + historyApiFallback: { + disableDotRule: true + }, + headers: devServer.headers, + overlay: devServer.overlay, + stats: { + entrypoints: false, + errorDetails: true, + modules: false, + moduleTrace: false + }, + watchOptions: devServer.watch_options + } + }) + } } } From 238870df3d7a820877d84f7c2bdfb6d5b2041d20 Mon Sep 17 00:00:00 2001 From: Ross Kaffenberger Date: Thu, 9 Jul 2020 03:59:03 -0400 Subject: [PATCH 2/4] Update CSS docs for importing from NPM package (#2659) Provides examples to address how importing CSS provided by an NPM package would work. Fixes #2552 https://github.com/rails/webpacker/issues/2552 --- docs/css.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/css.md b/docs/css.md index 7b3058b27..6befd2ce4 100644 --- a/docs/css.md +++ b/docs/css.md @@ -50,6 +50,17 @@ app/ @import './comments'; ``` +### Importing CSS provided by an NPM package from SCSS/CSS + +Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`: + +```js +/* app/javascript/stylesheets/application.scss */ + +@import "flatpickr/dist/flatpickr.css" +``` + + ### Importing CSS from JS ```sass @@ -76,6 +87,16 @@ const Hello = props => ( ) ``` +### Importing CSS provided by an NPM package from JS + +Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`. This is an alternative to importing from within a CSS file, as above: + +```js +// app/javascript/packs/application.js + +import "flatpickr/dist/flatpickr.css" +``` + ## Import scoped styles into your JS app Stylesheets that end with `.module.*` are treated as [CSS Modules](https://github.com/css-modules/css-modules). @@ -181,14 +202,14 @@ You can use Yarn to add bootstrap or any other modules available on npm: yarn add bootstrap ``` -Import Bootstrap and theme (optional) CSS in your app/javascript/packs/app.js file: +Import Bootstrap and theme (optional) CSS in your app/javascript/packs/application.js file: ```js import 'bootstrap/dist/css/bootstrap' import 'bootstrap/dist/css/bootstrap-theme' ``` -Or in your app/javascript/app.sass file: +Or in your app/javascript/packs/application.sass file: ```sass // ~ to tell that this is not a relative import From 44e0a53e10386302479a37767246ac5f19ff7927 Mon Sep 17 00:00:00 2001 From: madogiwa <17684091+Madogiwa0124@users.noreply.github.com> Date: Thu, 9 Jul 2020 16:59:33 +0900 Subject: [PATCH 3/4] Fixed how to specify `tsconfig.json` in TypeScript document. (#2657) Since `fork-ts-checker-webpack-plugin` version 5.0, the name has been changed to use the same name as ts-loader etc. --- docs/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/typescript.md b/docs/typescript.md index f40fc2b58..ffdc28c6a 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -30,7 +30,7 @@ The default installation only transpiles your TypeScript code using Babel. If yo "ForkTsCheckerWebpackPlugin", new ForkTsCheckerWebpackPlugin({ typescript: { - tsconfig: path.resolve(__dirname, "../../tsconfig.json"), + configFile: path.resolve(__dirname, "../../tsconfig.json"), }, async: false, }) From bf278f9787704ed0f78038ad7d36c008abc2edfd Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 9 Jul 2020 00:59:59 -0700 Subject: [PATCH 4/4] minor grammar fix (#2656) noun -> verb --- docs/webpack-dev-server.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/webpack-dev-server.md b/docs/webpack-dev-server.md index 7d8db6507..011410a4b 100644 --- a/docs/webpack-dev-server.md +++ b/docs/webpack-dev-server.md @@ -32,7 +32,7 @@ development: ``` `dev_server/hmr` option inside `webpacker.yml`. -Checkout this guide for more information: +Check out this guide for more information: - https://webpack.js.org/configuration/dev-server/#devserver-hot