https://github.com/mrwilbroad/webpack-config-scope
webpack configuration
https://github.com/mrwilbroad/webpack-config-scope
webpack
Last synced: 3 months ago
JSON representation
webpack configuration
- Host: GitHub
- URL: https://github.com/mrwilbroad/webpack-config-scope
- Owner: mrwilbroad
- Created: 2023-12-16T08:26:32.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-16T10:57:51.000Z (over 2 years ago)
- Last Synced: 2025-05-21T22:09:53.532Z (about 1 year ago)
- Topics: webpack
- Language: JavaScript
- Homepage:
- Size: 76.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webpack-config-scope
1. ## During css loading , this was configured to make sure even css style are transformed into appropriate bundle
```js
module.exports = {
mode: "production",
entry: [path.resolve(__dirname, "src/index.js")],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
}
};
```
2. ## After addition of HtmlWebpackPlugin for html template and other const value defintion
```js
const path = require("node:path");
const htmlwebpackplugin = require("html-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "production",
entry: [
path.resolve(__dirname, "src/index.js")
],
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-[contenthash].js",
},
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
title : "WEBPACK Dev",
filename: "index.html",
template: "public/index.html"
})
],
};
```
3. ## Addition Server configuration
```js
devServer : {
static : {
directory : path.resolve(__dirname,"dist")
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback : true
},
```
4. But on loading and refreshing every time new HashFile as output is generated , to avoid multiple filed to be generated
- in output Block add clean: true
```js
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle-[fullhash].js",
clean : true
},
```
5. Addition of Source map , This is for debuging your code when action problem is in the source code
- Easy to understand the source of error within your code
- Add this line as another block of statement in root of module.export
[Recommended choice for production builds with high quality SourceMaps.](https://webpack.js.org/configuration/devtool/#root)
```js
devtool: "source-map",
```