npm install px2rem-webpack-plugin --save-devThe plugin should be used with html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Px2remWebpackPlugin = require('px2rem-webpack-plugin');
var webpackConfig = {
entry: 'app.js',
output: {
path: 'dist',
filename: '[hash].app.js'
},
plugins: [
new HtmlWebpackPlugin(),
new Px2remWebpackPlugin({originScreenWidth: 750, maxWidth: 750}),
]
};This will generate a file dist/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script>
document.documentElement.style.fontSize = 100 * innerWidth / 320 + 'px'
addEventListener('load', function() {
setTimeout(function(){
document.documentElement.style.fontSize = 100 * innerWidth / 320 + 'px'
window.unit = 100 * innerWidth / 320;
var e = document.createEvent('Event');
e.initEvent('adjustReady', true, true);
window.dispatchEvent(e);
}, 480);
})
addEventListener('orientationchange', function() {
setTimeout(function(){
document.documentElement.style.fontSize = 100 * innerWidth / 320 + 'px'
}, 480)
});
</script>
</head>
<body>
<script src="6062412d2f3140cc3dd0.app.js"></script></body>
</html>And translate the px to rem in all css files, before webpack css-loader handle the css source.
The plugin can also be used together with sass-loader, less-loader or stylus-loader.
It will auto handle properly aftersass/less/styluscompilation but before thecss-loader
Note: css files in
node_moduleswill not be translated.
For example the css below
.abc { width: 750px; }will be automatically compiled to
.abc { width: 3.2rem; }# dev plugin
make dev ## in one bash
make debug ## in another bash
# build for publish
make build
# run tests
make test