In our project we are using webpack-dev-server to run our development environment.
We are currently transforming the project into a progressive-web-app using workbox.
When we run webpack with NODE_ENV=production everything is working fine, as it first compiles the files, and then the workbox plugin picks them up and adds them to the service-worker.
When we run webpack-dev-server hot, the build fails when running the workbox plugin as it cannot find any files in the dist folder.
The problem seems to be that workbox is not picking up the js and css files that are generated in-memory and seems to need the files on the file system.
module.exports = {
context: path.resolve(__dirname, 'front'),
entry: [
...preEntries,
'./react/app.js'
],
output: {
path: path.resolve(__dirname, 'front-dist'),
filename: `react/app.${git.gitCommitAbbrev}.js`,
chunkFilename: `react/[id].app.${git.gitCommitAbbrev}.js`,
publicPath: '/glass/'
},
devtool: isProdEnv ? false : 'eval-source-map',
stats: {
chunkModules: false
},
module: {
...
},
plugins: [
new WorkboxPlugin({
globDirectory: path.resolve(__dirname, 'front-dist'),
globPatterns: ['**/*.{html,js,css,woff2}'],
swDest: path.join(path.resolve(__dirname, 'front-dist/sw/'), 'service-worker.js'),
handleFetch: true,
clientsClaim: true,
skipWaiting: true,
})
]
}
Any idea's as to how this should be working
Recent releases of workbox-webpack-plugin have support for in-memory filesystems, with coverage in its test suite.
If you're still having troubles with the current release of Workbox, please open an issue on the issue tracker and we can investigate further.
That being said, using a cache-first service worker inside of a hot-reload, local development environment is a puzzling choice, as caching defeats the purpose of seeing updates right away.
Related
I'm using "vite": "^2.8.6" for React project. What I know is that Vite is using Rollup as module bundler, but I stumbled on a problem where Rollup still bundling my react-dom.development.js and react.development.js. I've used "rollup-plugin-replace" to replace my 'process.env.NODE_ENV' to production, but the problem still occur. Here is the my rollup config:
rollupOptions: {
// https://reactjs.org/docs/optimizing-performance.html#rollup
plugins: [
rollupPluginReplace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
rollupPluginCommonjs(),
terser(),
visualizer()
],
},
When I analyze with rollup-visualizer, you can see that rollup bundled both production and development dependency, which supposedly only bundled one of them right?
The problem with this is that there is extra 1MB of dead code in the bundle, it will be great if I can eliminate it.
This generally means that rollup does not understand that your app is directed towards production code. In my case it was because I had set up library mode.
lib: {
entry: './src/app.ts',
fileName: 'app.ts',
name: 'AppClass',
formats: ['iife'],
}
Removing this block finally generated a build which was sane in size. For more information, see the vite documentation.
If you were also trying to get vite/rollup to build your app as an IIFE, setting rollupOptions worked for me:
rollupOptions: {
output: {
entryFileNames: `[name].js`,
assetFileNames: `app.[ext]`,
format: 'iife',
},
input: ['./src/app.ts'],
},
Background
I'm creating a small project in Visual Studio to learn React. However when I change something in my app.tsx, I have to run the
node_modules\.bin\webpack app.tsx --config webpack-config.js
command for my project to re-run the webpack so i can build and run my changed code.
There must be a better way to do this right?
What I want to do
I want to know if there is a way to automatically run this command when I press the run button in Visual Studio. Or if there is a better way of doing this, know how to simplify this process.
When I've done other javascript projects I've used vagrant or a build server that has been automated for this purpose (check code for changes, update the "converted/build/compile" code). But those processes have been automated from the start and not by me so I don't really know what to do.
What I've tried
Since I've never encountered a situation where this was an issue, I don't really know how to address this problem. I have searched for ways to "auto-run commands in the cmd/terminal on run" and similar search strings, but they all lead to solutions to problems other than this.
Question
How can I configure VS/implement a code snippet that runs the
node_modules\.bin\webpack app.tsx --config webpack-config.js
command in the cmd/terminal when I press Run in Visual Studio?
EDIT:
I have solved the problem.
It says on their official docs that the feature I need is "watch" and it says that this feature is:
In webpack-dev-server and webpack-dev-middleware watch mode is enabled by default.
But it is not. So in order to enable it I had to add a line to the webpack-config.js with watch:true
The now working config looks like this:
module.exports = {
devtool: 'source-map',
entry: "./app.tsx",
mode: "development",
output: {
filename: "./app-bundle.js"
},
resolve: {
extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
},
module: {
rules: [
{
test: /\.tsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'ts-loader'
}
}
]
},
watch:true
}
Now I only have to run the command once and it checks for changes in my project code and re-packs the webpack automatically.
I have a large angular 1.6 application. Most of it is written in ES5 syntax and some small parts are sort of ES6. I'm saying sort of ES6 because we don't actually use modules/import/export. The reason for that is although we do use gulp to bundle all source code when deploying, we don't want to do that on dev, because it involves running gulp every small code change, and running it takes time, plus the fact that its much nicer to debug the original file per class structure rather then the bundled code (even when not uglified).
Is there a way, to debug angular 1.6 in ES6 syntax without bundling? Can Babel somehow help me keep the original files structure, for development purposes only?
Babel is basically a transpiler, so its job is only to make sure to output es5 code. It will NOT help u organize folder structure.
Bundling it with webpack helps u maintain a sane folder structure. u can have a configuration object which specifies your entry-point,(called "entry"), output-file, loaders, inline : true, so it automagically refreshes the browser for you for any small change. webpack also comes with a dev-server.
Below is what i use in my webpack.config.js.
It helps me maintain a local sandbox for my es6 escapades.
module.exports = {
entry : ['./app/index.js'], //entrypoint
output: {
path: 'D:\\js\\es6\\build',
filename: 'bundle.js'
},
module: {
loaders: [ //specify objects for each loader
{
loader: 'babel-loader' ,
test: /\.js$/,
exclude: /node_modules/, //we dont want to transpile the .js on node_modules
}
]
},
devServer: {
port: 3000,
contentBase: './build',
inline: true, //allows us to run automatic live code update
}
}
I am new to react, redux and webpack and I have several problems. I started with "simpe-redux-boilerplate". My project structure is:
--src
--containers
--index.js
--...
--php
--vendor
--janguage.json
First, I need to use janguage.json from my App.js in container directory without bundling, so I am not importing it but fetching
fetch('language.json')...
I am able to import it with path './../../language.json', but for fetching this path is not working. Which is the right path?
Second, I am using php for server requests (php and other directories). Unfortunately, these directories are not included in my build. How to add them? Move to src directory doesn't work.
My webpack prod configuration:
entry: [
'./src/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},...
Thank you.
I'm reading tutorial about Webpack on this: Github Webpack tutorial In this, there is a section about config webpack for production and development.
Here is development configuration:
// webpack.config.dev.js
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
Here is production configuration:
// webpack.config.prod.js
module.exports = {
devtool: 'source-map',
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
I understand the difference in option of devtool. The thing I don't understand about entry. Why in production, entry is only about src/index but in development configuration, entry also includes webpack-dev-server
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
The lines 'webpack-dev-server/client?http://localhost:8080' and 'webpack/hot/dev-server' are configuring/defining which port to attach an active websocket to, in this case localhost:8080, and the content base which in this case is folder/path /client. In a production environment you would never run webpack-dev-server as your bundled client assets (bundle.js or similar) would be served by a server (IIS, Node, etc), that is why there are no webpack related items in entry of the production configuration.
The Webpack plugin in question webpack-dev-server is not required to run Webpack and compile your JS sources, it simply is a tool that can be used during the development process to watch for changes and reload changes.
Technically the entry array property in development could simply be the './src/index', but then it wouldn't enable the webpack-dev-server and/or it's hot module reloading. If you wanted to run webpack-dev-server without these configuration items then you'd then need to add command line arguments when starting webpack to specify the port and/or content base.
Hopefully that helps!
Here is the 2 things you should know before understanding:
As your linked in Webpack the confusing part, there are 3 types of entry: String Array and Object. As above code, that is array type. Meaning of entry array is: Webpack will merged all those javascript files in array together. This is often unnecessary because Webpack is intelligent enough to know which javascript files need to merge while processing. You often need to do this to enhance some features from different javascript files that you don't include somewhere else in your code.
This is "little tricky" part. You see webpack/hot/dev-serverand webpack-dev-server/client?http://localhost:8080 look like a web url rather than some javascript files, right? If you check your project directory, you see there are those files: your_app_directory/node_modules/webpack/hot/dev-server.js and your_app_directory/node_modules/webpack-dev-server/client.js. And that is the real meaning: you are importing two javascript files from two modules webpack-dev-server and webpack.
Back again to your webpack configuration:
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
That means we will merge three different javascript files together as point 2 I have figured out. As I explain in point 1, you will do this for enhancing some features. You include file webpack-dev-server/client.js for making a server for serving your code. You include file webpack/hot/dev-server.js for allowing your code autoloading. This is super useful when you in development mode without start/stop server each time you modify your code.