Image process loader for webpack
npm install chrome-manifest-loader``sh`
npm install --save-dev chrome-manifest-loader extract-loader file-loader
Chrome manifest loader for webpack
- support Chrome, Firefox and Opera manifest.json
- import assets that is defined in manifest.json
- map package.json version to manifest.json version
first, import manifest.json in your index js once
Wrap your asset path with require()
- the asset path should be relative to current manifest.json path
- if no ./ or ../ prefix, it will be consider as under node_modules
webpack.config.js
`js`
{
"module": {
"rules": [
{
test: /\/manifest\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
'chrome-manifest-loader'
],
// needed for webpack 4 to override default json loader
type: 'javascript/auto'
}
]
}
}
manifest.json
`json`
{
"icon": {
"16": "require(./img/icon16.png)"
}
}
output
`json`
{
"icon": {
"16": "file path defined by other loader, eg: file-loader"
}
}
Option: mapVersion: true
webpack.config.js
`js`
{
"module": {
"rules": [
{
test: /\/manifest\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
{
loader: 'chrome-manifest-loader',
options: {
mapVersion: true
}
}
],
// needed for webpack 4 to override default json loader
type: 'javascript/auto'
}
]
}
}
package.json
`json`
{
"version": "1.0.1"
}
manifest.json
`json`
{}
output (manifest.json)
`json`
{
"version": "1.0.1"
}
Option: mapMinimumChromeVersion: true
webpack.config.js
`js`
{
"module": {
"rules": [
{
test: /\/manifest\.json$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
{
loader: 'chrome-manifest-loader',
options: {
mapMinimumChromeVersion: true
}
}
],
// needed for webpack 4 to override default json loader
type: 'javascript/auto'
}
]
}
}
.browserslistrc
`json`
chrome >= 51
manifest.json
`json`
{}
output (manifest.json)
`json``
{
"minimum_chrome_version": "51"
}