Comments (9)
See this about dev server support: #14 (comment)
from offline-plugin.
@CYBAI Can you provide an example of your webpack.config.js
?
from offline-plugin.
Here is my base.js
of webpack.config and I used yo react-webpack
to generate this.
var path = require('path');
var port = 8000;
var srcPath = path.join(__dirname, '/../src');
var publicPath = '/assets/';
module.exports = {
port: port,
debug: true,
output: {
path: path.join(__dirname, '/../dist/assets'),
filename: 'app.js',
publicPath: publicPath
},
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: port,
publicPath: publicPath,
noInfo: false
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
actions: srcPath + '/actions/',
components: srcPath + '/components/',
sources: srcPath + '/sources/',
stores: srcPath + '/stores/',
styles: srcPath + '/styles/',
config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
}
},
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
include: path.join(__dirname, 'src'),
loader: 'eslint-loader'
}
],
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.sass/,
loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
},
{
test: /\.less/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.styl/,
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.(png|jpg|gif|woff|woff2)$/,
loader: 'url-loader?limit=8192'
}
]
}
};
dev.js
var path = require('path');
var webpack = require('webpack');
var _ = require('lodash');
var baseConfig = require('./base');
// Add needed plugins here
var BowerWebpackPlugin = require('bower-webpack-plugin');
var OfflinePlugin = require('offline-plugin');
var config = _.merge({
entry: [
'webpack-dev-server/client?http://127.0.0.1:8000',
'webpack/hot/only-dev-server',
'./src/components/run'
],
cache: true,
devtool: 'eval',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new BowerWebpackPlugin({
searchResolveModulesDirectories: false
}),
new webpack.ProvidePlugin({
'Promise': 'bluebird',
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}),
// new OfflinePlugin({
// caches: 'all',
// scope: '/',
// updateStrategy: 'all',
// version: 'v1',
// ServiceWorker: {
// output: 'sw.js'
// },
// AppCache: {
// directory: 'appcache/'
// }
// })
]
}, baseConfig);
from offline-plugin.
Oh, I didn't tested plugin with webpack-dev-server
. I will take a look at it of course, but not sure how it will work with Hot Module Reloading, etc.
Btw, I actually do not like to user offline-plugin
in development mode since it requires at least 2 page reload to get new content. Why you may need it with webpack-dev-server
?
from offline-plugin.
I want to test ServiceWorker
in dev mode as well, so I just tried to use it :)
from offline-plugin.
@CYBAI Yeah, I understand the idea of testing :) Btw, SW won't work on 127.0.0.1
unless it's https. For local testing only localhost
doesn't need to have https
.
Anyway, I will take a look at what I can do here.
from offline-plugin.
@NekR yeah, after I read some articles, I realize that SW can't work on localhost
! I will try it on https
such as gh-pages
. Thanks.
from offline-plugin.
@CYBAI I actually works on localhost if host (domain) is exactly localhost
, not an IP version of it e.g. 127.0.0.1
from offline-plugin.
Okay, it seems that it's possible to support webpack-dev-server
's iframe mode, but even for that mode I will have to write a lot of heuristics to properly update cache with iframe refresh. So I am going to mark with for v2, since I do not see easy fix for this at the moment.
from offline-plugin.
Related Issues (20)
- Question - SW caching all assets site-wide HOT 1
- In Angular 9, files inside directories are not being cached
- Ideas for Documentation to Help with Troubleshooting
- Some files missing in cache on SW first load/install HOT 1
- Caching subpath urls
- Caching fails to download assets in Chrome 85 HOT 1
- Issue with default path
- [question] Having Multiple runtime installations
- Problem with Webpack 5.0 HOT 17
- Micro Front-ends structure with single-spa
- Auto update doesn't work
- After removing redux-offline, how do we ensure that client's who have old versions get the latest update?
- `onInstalling` doesn't seem to be called, because `ignoreInstalling` is always true
- offline-plugin does not serve assets from service worker
- Webpack 5 compatibility HOT 3
- The "path" argument must be of type string. Received undefined HOT 4
- Cache Images from AWS S3
- Pass ServiceWorker version to the install events
- Terser Plugin issue while building with webpack-cli HOT 3
- upgrade ejs package | CVE-2022-29078 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from offline-plugin.