, , .
bookmarklet, .
(, <link>
<script>
) , , , , .
, . :
1. Bundle JS CSS
webpack! , , , style-loader
, .
, , (, - ..), CSS, , url-loader
limit: 0
, .
, , (, bookmarklet-loader
), , , ( , require
).
webpack - , : JavaScript-, .
2.
, URI < <27 > .
, bookmarklet
. , , , - JavaScript, " " , :
'javascript:' + encodeURIComponent('(function(){' + code + '})()')
bookmarklet
node script ( , , -).
, webpack "bookmarkletify":
function AssetToBookmarkletPlugin() {}
AssetToBookmarkletPlugin.prototype.apply = function (compiler) {
compiler.plugin('emit', function (compilation, callback) {
var asset;
for (var assetName in compilation.assets) {
asset = compilation.assets[assetName];
compilation.assets[assetName] = {
source: function () {
return 'javascript:' + encodeURIComponent('(function(){' + asset.source() + '})()');
},
size: asset.size
}
}
callback();
});
};
( , CSS JS, bookmarkletify), - :
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
target: 'web',
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {limit: 0}
}]
}, {
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {minimize: true}
}]
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new AssetToBookmarkletPlugin()
]
};
dist/index.js
.