Webpack installation

ABertie — Tue, 10 Oct 2023 06:31:36 +0000

You need to:

Make a .gitigore where you write:
```
node_modules
```

When you make a package.json file with all of this:

{
"dependencies": {
    "css-loader": "^6.8.1",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss": "^8.4.31",
    "postcss-loader": "^7.3.3",
    "postcss-preset-env": "^9.2.0",
    "sass": "^1.69.3",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
},
"name": "webpack-test",
"description": "We will start by install the necessary by go to the terminal on your procject and write:",
"version": "1.0.0",
"main": "postcss.config.js",
"scripts": {
    "serve": "webpack serve",
    "build": "webpack",
    "build:watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

When a postcss.config.js with this:

module.exports = {
    plugins: [require("postcss-preset-env")]
}

And a webpack.config.js with this:

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
    mode: process.env.environment == "production" ? "production" : "development",
    plugins: [new MiniCssExtractPlugin()],
    module: {
        rules: [
            {
                test: /\.(s[ac]|c)ss$/i,
                //test: path.resolve(__dirname, "src/scss/*"),
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader", "postcss-loader"]
            },{
                test: /\.png$/i,
                type: "asset"
            }
        ]
    },
    devtool: "source-map",
    devServer: {
        static: "./dist"
    }
}

Now you can write in you terminal:

npm install

or

npm install webpack webpack-cli webpack-dev-server css-loader style-loader sass sass-loader postcss postcss-loader postcss-preset-env mini-css-extract-plugin
When make a src/index.js file
```
src (folder)
    index.js (file)
```
And now you can writh in you terminal:

npm run build:watch
Now you can make a index.html file in the dist folder with a link to main.css. In this file you can make you own html
Then you when need a css, scss or js file you will make it in the src folder and import those in you index.js like e.g:
```
import "style.scss";
```

DEV Community: ABertie

Webpack installation