A simple webpack loader that mimics the function of parcelify.
$ npm install --save-dev parcelify-loader
Some browserify-based projects are relying on
parcelify to bundle necessary
module stylesheets by reading values from an additional style
property in the
component's package.json
file. Webpack relies on CommonJS import/require
syntax, so it does not read bundling information from a package file.
The loader reads from package.json
, parses the style
attribute and adds a
virtual require()
for the stylesheet to the in-mem version of the loaded
javascript file.
You will need to configure parcelify-loader
for the javascript source files
in your webpack.config.js
.
Note: you will also need an appropriate stylesheet loader, read more about it here.
Apply parcelify-loader
to the desired filetypes (enforcing pre
to run before
all other transformations):
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: [ "parcelify-loader" ],
include: [
path.resolve("./src"),
path.resolve("./node_modules/your-browserify-components") // e.g.
]
}
]
}
Make sure you include your compoment's source directory in include
; otherwise,
native styles for components will not be included.
(Optional) Configure parcelify-loader
with project specific settings:
module: {
rules: [
{
...
use: [
loader: "parcelify-loader",
options: {
json: "component.json"
}
]
}
]
}
The following settings can be configured for parcelify-loader
:
json
- the filename of your component's json file. Default:
options: {
json: "package.json"
}
encoding
- the encoding of your component's json file. See list of encodings for supported encodings. Default:
options: {
encoding: "utf8"
}
require
- the statement to wrap the required style file in. Note that this setting must have a$1
parameter to work. Default:
options: {
require: "require($1)"
}
lineBreakSeq
- the character sequence to render afterrequire
. Typically, you will not need anything but the linebreak. Default:
options: {
lineBreakSeq: "\n"
}
Version 1.0.0 of parcelify-loader
supports webpack 1.14.0.