I've only recently started using WebPack. (with Typescript, which I've been using for a long time, and Preact since recently.)
I'm really happy with it so far - it's working great, both during development, and when building the production assets.
My question here is actually simple: how is a webpack project rooted? It doesn't seem to automatically root itself neither from the locations of the package.json or webpack.config.json files, and I can't find an option to root it.
I have a project with the following structure:
root/
package.json
styleguide/
webpack.config.js
styleguide.tsx
tsconfig.json
I have other sub-projects besides styleguide in this project - that one happens to use webpack, others use e.g. tsc or node-sass etc., is why it's structured like this.
My webpack configuration looks like this:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
"styleguide-deps": ["prismjs", "preact", "js-beautify"],
"styleguide": "./styleguide.tsx"
},
output: {
filename: "[name].js",
path: path.join(__dirname, "/../assets/demo/"),
libraryTarget: "amd"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "styleguide-deps",
minChunks: Infinity,
})
],
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
// Don't bundle these modules, but request them at runtime (client-side, via require.js)
externals: {
"kodus": "kodus"
}
};
My package.json has a scripts entry like the following:
"scripts": {
"build-styleguide-ts": "cd styleguide && webpack",
},
And the question I'm asking is, why do I have to cd into styleguide to run webpack?
I've tried e.g. webpack --config styleguide/webpack.config.json from the project root, and I can't get it to work.
I can use absolute paths in most places, but not for entry.styleguide, and it seems ./ works relative to the current directory, rather than to the project root.
My objection is that no script should ever rely on the current directory, as that's just global state, and I generally use absolute paths everywhere, but that hasn't worked for me with webpack.
How can I remove the dependency on the current directory?
👋 @thelarkinn