Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2026-03-20 01:37:46 +01: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", "extract-loader": "^5.1.0",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3", "optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",

1
source/options.html
View File

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

1
source/popup.html
View File

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

2
source/scripts/options.js
View File

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

2
source/scripts/popup.js
View File

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