https://github.com/ctechhindi/webpack-with-chrome-extension-v3
Webpack with Chrome Extension V3
https://github.com/ctechhindi/webpack-with-chrome-extension-v3
chrome-extension chrome-extension-v3 nodejs webpack
Last synced: about 1 month ago
JSON representation
Webpack with Chrome Extension V3
- Host: GitHub
- URL: https://github.com/ctechhindi/webpack-with-chrome-extension-v3
- Owner: ctechhindi
- Created: 2021-08-06T10:58:08.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-06T11:47:41.000Z (almost 4 years ago)
- Last Synced: 2025-04-02T19:47:03.868Z (about 2 months ago)
- Topics: chrome-extension, chrome-extension-v3, nodejs, webpack
- Language: JavaScript
- Homepage: https://ctechhindi.in/
- Size: 89.8 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack with Chrome Extension V3
## Installation
In the package root directory, run the `npm init` command.
```bash
npm init
```
### Install NPM Package
#### **Webpack**
* `Webpack` is a module bundler.
* Install [Webpack](https://www.npmjs.com/package/webpack) with npm:
```bash
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev clean-webpack-plugin
npm install --save-dev copy-webpack-plugin
npm install --save-dev html-webpack-plugin
```
* Read Webpack [Guides](https://webpack.js.org/guides/development/)
#### Asset Management
```bash
npm install --save-dev style-loader css-loader file-loader html-loader
npm install sass-loader sass webpack --save-dev
npm install babel-loader babel-minify --save-dev
npm i -D source-map-loader
```
#### Others
```node
npm install --save-dev fs-extra
```
#### Create/Edit Files in the Project
1. Edit `package.json`
```json
"scripts": {
"start": "node utils/webserver.js",
"watch": "webpack --watch",
"watch:dev": "webpack --watch --mode development",
"build": "webpack",
},
```
2. Create `webpack.config.js`
#### Test/Run Webpack
```
npm run start
npm run watch
npm run watch:dev
npm run build
```