Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2025-10-07 07:22:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: use mini-css-extract-plugin for css

Browse Source
This commit is contained in:
abhijithvijayan 2020-11-15 16:29:43 +05:30
parent 768d6d2a22
commit da349a0153
6 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -60,6 +60,7 @@
"extract-loader": "^5.1.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",

1
source/options.html
View File

@ -5,7 +5,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Options</title>
<link rel="stylesheet" href="css/options.css" />
</head>
<body>

1
source/popup.html
View File

@ -5,7 +5,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title>
<link rel="stylesheet" href="css/popup.css" />
</head>
<body>

2
source/scripts/options.js
View File

@ -1,4 +1,6 @@
import 'emoji-log';
import '../styles/options.scss';
// eslint-disable-next-line no-console
console.emoji('🦄', 'Hello World from options main file!');

2
source/scripts/popup.js
View File

@ -1,6 +1,8 @@
import 'emoji-log';
import browser from 'webextension-polyfill';
import '../styles/popup.scss';
function openWebPage(url) {
return browser.tabs.create({url});
}

21
webpack.config.js
View File

@ -5,9 +5,9 @@ const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtensionReloader = require('webpack-extension-reloader');
const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
@ -58,7 +58,6 @@ module.exports = {
contentScript: './source/scripts/contentScript.js',
popup: './source/scripts/popup.js',
options: './source/scripts/options.js',
styles: ['./source/styles/popup.scss', './source/styles/options.scss'],
},
output: {
@ -100,14 +99,8 @@ module.exports = {
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].css',
context: './source/styles/',
outputPath: 'css/',
},
loader: MiniCssExtractPlugin.loader, // It creates a CSS file per JS file which contains CSS
},
'extract-loader',
{
loader: 'css-loader',
options: {
@ -135,8 +128,6 @@ module.exports = {
new WextManifestWebpackPlugin(),
// Generate sourcemaps
new webpack.SourceMapDevToolPlugin({filename: false}),
// Remove style entries js bundle
new FixStyleOnlyEntriesPlugin({silent: true}),
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
@ -149,15 +140,19 @@ module.exports = {
cleanStaleWebpackAssets: false,
verbose: true,
}),
// write css file(s) to build folder
new MiniCssExtractPlugin({filename: 'css/[name].css'}),
new HtmlWebpackPlugin({
template: 'source/options.html',
// inject: false,
inject: 'body',
hash: true,
chunks: ['options'],
filename: 'options.html',
}),
new HtmlWebpackPlugin({
template: 'source/popup.html',
// inject: false,
inject: 'body',
hash: true,
chunks: ['popup'],
filename: 'popup.html',
}),