Webpack for Building and Rebuilding the Chrome Extension
Webpack is a module bundler for JavaScript applications. It can be used to build and rebuild the Screenly Chrome extension during development. Here are the possible options and examples for using webpack in this project.
Webpack Configuration
Webpack can be configured using a JavaScript file called webpack.config.js. Here is an example of a basic webpack configuration for the Screenly Chrome extension:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/background.js',
output: {
filename: 'background.js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.html$/,
use: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/popup.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
};
This configuration sets up webpack to bundle the background.js file in the src directory and output the result to the dist directory. It also sets up loaders for handling SCSS and HTML files.
Building the Extension
To build the extension using webpack, run the following command in the terminal:
npx webpack
This will bundle the extension and output the result to the dist directory.
Rebuilding the Extension
To rebuild the extension during development, webpack can be run in watch mode. This will automatically rebuild the extension whenever a change is detected:
npx webpack --watch
Other Webpack Options
Webpack has many other options and plugins that can be used to customize the build process. Here are some examples:
- ESLint: Webpack can be configured to use ESLint for linting JavaScript files. Here is an example configuration:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'eslint-loader',
options: {
fix: true,
},
},
enforce: 'pre',
},
// ...
],
},
// ...
};
- Puppeteer: Webpack can be configured to use Puppeteer for testing the extension. Here is an example configuration:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'puppeteer-preprocessor-loader',
options: {
puppeteer: {
args: ['--no-sandbox'],
},
},
},
},
// ...
],
},
// ...
};
Sources
- Webpack Documentation
- HTML Webpack Plugin Documentation
- Mini CSS Extract Plugin Documentation
- CSS Loader Documentation
- Sass Loader Documentation
- File Loader Documentation
- HTML Loader Documentation
- ESLint Loader Documentation
- Puppeteer Preprocessor Loader Documentation
The information used in this answer is from the official webpack documentation and other official documentation linked in the answer.
