If I'm developing a node module like this:
// index.js in library
const loadRoutes = () => require('./routes.js')
export default loadRoutes
Then bundle it using webpack:
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
mode: 'development'
}
Then in end-user application, when I import the library, I want require('./routes.js') to require routes.js relative to the app.
import loadRoutes from 'myLib'
loadRoutes()
But it throws an exception: Can not find module './routes.js'.
I tried to use webpack ignore plugin. But it's not working in the way I expected. Webpack configuration is:
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
plugins: [
new webpack.IgnorePlugin(/routes\.js/)
],
mode: 'development'
}
I don't know why such a useful thing should be that hard to be implemented in webpack. Am I doing it wrong? or what?
Related
I'd like to configure webpack to transpile (mocha + chai) tests written in typescript to javascript and them execute them. To that end, I have the webpack.test.config.js file below. Note: I've currently configured webpack to use ts-loader and mocha-loader.
Unfortunately, when I execute webpack --config webpack.test.config.js --env.dev, I receive the error:
Module parse failed: Unexpected token (2:10) You may need an
appropriate loader to handle this file type.
How can resolve this error and achieve my aforementioned goal?
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputPath = './bin/test';
module.exports = env => {
return {
mode: env && env.pro ? 'production' : 'development',
context: path.resolve('src'),
entry: {
core: './test/typescript/core.spec.ts'
},
output: {
filename: '[name].js',
path: path.join(__dirname, outputPath)
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin({
dry: true,
cleanOnceBeforeBuildPatterns: ['./bin/test/**/*']
})
],
module: {
rules: [
{
test: /\.spec\.tsx?$/,
use: ['mocha-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
}
};
};
i have this es6 class in my /src/index.js
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return `(${this.x}, ${this.y})`;
}
}
export default Point;
here is the webpack.config.js file
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
library: 'point',
libraryTarget: 'umd',
umdNamedDefine: true,
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
so when i include in my index.html file like this:
<!DOCTYPE html>
<html>
<head>
<title>Webpack</title>
</head>
<body>
<!-- Scripts -->
<script src="dist/bundle.js"></script>
<script type="text/javascript">
new point(1, 3).toString()
</script>
</body>
</html>
so i have this error in console
"Uncaught TypeError: point is not a constructor"
this is umd script type
why i'm seeing this error while compile with webpack?
same scenario working fine with rollup
is there any solution?
and one more thing i saw almost every developer use rollup for es6 package development to compile "esm", "umd" versions of the script.
but i want to use webpack instead of rollup.
any guide?
thanks
Please add libraryExport: 'default', in output section of Webpack configuration.
something like this (for your case),
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
library: 'point',
libraryTarget: 'umd',
umdNamedDefine: true,
libraryExport: 'default',
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
Expected:
When I build with webpack, all my JS files get bundled except for the files in the ./src/Portfolio directory as per my Webpack.config.js settings.
Actual:
Webpack bundles all the files including the ones in the directory despite the settings and other variations i have provided within webpack.config.js.
Code:
Webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'source-map',
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: [
path.resolve(__dirname, './src/Portfolio/')
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
Output:
How can i successfully exclude the ./src/Portfolio directory and its
contents?
Depending on what your folder structure looks like it appears you aren't providing it the right directory location to exclude. I would think something like this should work, but if not please share your folder structure.
const path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'source-map',
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: [
'./src/Portfolio/'
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I know the op is using javascript, fyi a similar problem can occur using typescript with webpack.
In this case excluded directories can be added to tsconfig.json instead of webpack.config.js,
//tsconfig.json
{
"compilerOptions": {
...
},
"exclude": [
"./src/Portfolio/",
]
}
The webpack-dev-server is bundling the html, scss and js files successfully and the output is also getting served on localhost:8080 but the dist folder is not getting created on local. Following is my webpack configuration:
var extractPlugin = new ExtractTextPlugin({
filename: 'main.css'
});
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devtool: 'inline-source-map',
devServer: {
port: 3000
},
plugins: [
extractPlugin,
new HtmlWebpackPlugin({
template: 'public/index.html'
}),
new CleanWebpackPlugin(['dist'])
]
};
The webpack-dev-server serves the created bundle from memory and does not write it to the dist directory.
I have two webpack 2 projects
The 1st one, let's call it lib1 is a library of reusable React components. In the webpack config it is exported as a library with the name lib1. The project lists react and react-dom as external dependencies.
The 2nd one, let's call it proj1 is an app that uses lib1. Because lib1 is served on a cdn, it's listed as an external dependency. The project also depends on react and react-dom. Using CommonsChunkPlugin I generare a vendor.js that includes react and react-dom (and eventually other dependencies).
When I run proj1 in the browser, the code inside lib1 fails because it can't find react. The libraries are loaded in this order:
<script src="dist/vendor.js"></script>
<script src="http://cdn.com/lib1/lib1.js"></script>
<script src="dist/bundle.js"></script>
I guess the issue is that react and react-dom are not exported by my vendor.js file.
I tried using the library option like this (int proj1):
library: "[name]",
libraryTarget: "umd"
But it creates window.vendor not window.React and window.ReactDOM.
How do I do that?
lib1 config
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, "dist"), // string
filename: "bundle.js",
publicPath: "/dist/",
library: "lib1",
libraryTarget: "umd",
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, "node_modules"),
}]
},
externals: ["react", "react-dom"],
};
proj1 config
var webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
bundle : './src/index.js',
vendor : ['react', 'react-dom']
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
publicPath: "/dist/",
library: "[name]",
libraryTarget: "umd",
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
],
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, "node_modules"),
}]
},
externals: ["lib1"],
devtool: "source-map"
};