16 |
43 |
17 |
42 | Heavy editor
18 |19 | But it doesn't pollute bundle of home page 20 |
21 |
2 |
3 | [npm-image]: http://img.shields.io/npm/v/extracted-loader.svg?style=flat-square
4 | [npm-url]: http://npmjs.org/package/extracted-loader
5 |
6 | It hotreloads extracted stylesheets extracted with `ExtractTextPlugin`.
7 |
8 | No configuration needed. A better [css-hot-loader](https://github.com/shepherdwind/css-hot-loader).
9 |
10 | ## Use case
11 |
12 | You want to hot reload only stylesheets, not the whole page. Great for editing dynamic views.
13 |
14 | ## Installation
15 |
16 | ```
17 | npm install extracted-loader --save-dev
18 | ```
19 |
20 | or
21 |
22 | ```
23 | yarn add extracted-loader --dev
24 | ```
25 |
26 | And then you can use it for example as so:
27 |
28 | ```js
29 | const isDev = process.env.NODE_ENV === 'development'
30 |
31 | config.module.rules.push({
32 | test: /\.css$/,
33 | use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
34 | filename: isDev ? "[name].css" : "[name].[contenthash].css",
35 | /* Your configuration here */
36 | }))
37 | })
38 |
39 | config.plugins.push(new ExtractTextPlugin('index.css'))
40 | ```
41 |
42 | For hot reloading to work it is important **to not** use `[contenthash]` in development configuration.
43 |
44 | ## Example use with sass
45 |
46 | ```js
47 | config.module.rules.push({
48 | test: /\.(sa|sc|c)ss$/,
49 | use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
50 | use: [
51 | "babel-loader",
52 | {
53 | loader: 'css-loader',
54 | options: {
55 | url: true,
56 | minimize: !isDev,
57 | sourceMap: isDev,
58 | importLoaders: 2
59 | }
60 | },
61 | {
62 | loader: 'postcss-loader',
63 | options: {
64 | sourceMap: isDev,
65 | plugins: [
66 | require('autoprefixer')({
67 | /* options */
68 | })
69 | ]
70 | }
71 | },
72 | {
73 | loader: 'sass-loader',
74 | options: {
75 | sourceMap: isDev
76 | }
77 | }
78 | ]
79 | }))
80 | })
81 |
82 | config.plugins.push(new ExtractTextPlugin('index.css'))
83 | ```
84 |
85 | ## How it works
86 |
87 | By reloading all relevant `` when extracted text changes.
88 |
89 | ## How to use with...
90 |
91 | - [next.js](https://github.com/sheerun/extracted-loader/tree/master/examples/with-next)
92 |
93 | ## Contributing
94 |
95 | Yes, please
96 |
97 | ## License
98 |
99 | MIT
100 |
--------------------------------------------------------------------------------
/examples/with-next/bin/start:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const express = require('express')
4 | const next = require('next')
5 | const fs = require('fs')
6 | const path = require('path')
7 | const compression = require('compression')
8 | const device = require('express-device')
9 |
10 | const port = parseInt(process.env.PORT, 10) || 3000
11 | const dev = process.env.NODE_ENV === 'development'
12 | const app = next({ dev })
13 | const handle = app.getRequestHandler()
14 | const rootDir = path.resolve(__dirname, '..')
15 | const outDir = path.join(rootDir, 'out')
16 | const routes = require('../routes')
17 |
18 | app.prepare().then(() => {
19 | const server = express()
20 |
21 | server.use(compression())
22 |
23 | const orderedRoutes = routes.orderedRoutes()
24 |
25 | const hasCritical = fs.existsSync(path.join(outDir, 'index-phone.html'))
26 |
27 | if (dev) {
28 | server.use('/static', express.static(path.join(rootDir, '.static')))
29 | } else {
30 | server.use('/_next/', express.static(path.join(outDir, '_next'), {
31 | maxAge: "365d",
32 | immutable: true
33 | }))
34 |
35 | // We know generated assets are immutable so we set high max-age
36 | server.use('/static/assets/', express.static(path.join(outDir, 'static/assets'), {
37 | maxAge: "365d",
38 | immutable: true
39 | }))
40 |
41 | // Other assets are mutable, but we want CDNs to cache it for at least 1m
42 | server.use('/static/', express.static(path.join(outDir, 'static'), {
43 | maxAge: "1m"
44 | }))
45 |
46 | if (hasCritical) {
47 | const criticalMiddlewares = {
48 | phone: express.static(outDir, { index: 'index-phone.html' }),
49 | tablet: express.static(outDir, { index: 'index-tablet.html' }),
50 | desktop: express.static(outDir, { index: 'index-desktop.html' })
51 | }
52 |
53 | server.use(device.capture())
54 | server.use((req, res, next) => {
55 | switch (req.device.type) {
56 | case 'phone':
57 | criticalMiddlewares.phone(req, res, next)
58 | return
59 | case 'tablet':
60 | criticalMiddlewares.tablet(req, res, next)
61 | return
62 | default:
63 | criticalMiddlewares.desktop(req, res, next)
64 | }
65 | });
66 | } else {
67 | server.use('/', express.static(path.join(rootDir, 'out')))
68 | }
69 | }
70 |
71 | // Fallback to dynamic routes
72 | orderedRoutes.forEach(({ pathname, page, query }) => {
73 | server.get(pathname + '*', (req, res) =>
74 | app.render(req, res, page, query || {}))
75 | })
76 |
77 | server.get('*', (req, res) => handle(req, res))
78 |
79 | server.listen(port, err => {
80 | if (err) throw err
81 | console.log(`> Ready on http://localhost:${port}`)
82 | })
83 | })
84 |
--------------------------------------------------------------------------------