Merge pull request #1 from rails/master

update webpacker

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

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,
       })

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
 

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)
+    })
   })
 })

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
+        }
+      })
+    }
   }
 }