Here's an example, please adapt it to your project yourself, if it suits of course.
'use strict'; const NODE_ENV = process.env.NODE_ENV || 'development'; const webpack = require('webpack'); module.exports = { context: __dirname + '/frontend', entry: { app: './app' }, output: { path: __dirname + '/public/js', publicPath: '/js/', // /js/app.js filename: "[name].js" }, watch: NODE_ENV == 'development', watchOptions: { aggregateTimeout: 100 }, plugins: [ new webpack.NoErrorsPlugin() ], resolve: { modulesDirectories: ['node_modules'], extensions: ['', '.js'] }, resolveLoader: { modulesDirectories: ['node_modules'], moduleTemplates: ['*-loader', '*'], extensions: ['', '.js'] } }; if (NODE_ENV == 'production') { module.exports.plugins.push( new webpack.optimize.UglifyJsPlugin({ compress: { // don't show unreachable variables etc warnings: false, drop_console: true, unsafe: true } }) ); }
This is the code of the webpack.config.js file from the frontend folder it copies the modules into public
Folder structure:
The fact is that if your code includes libraries or other dependencies, you need to build it correctly.
In my case it works. Here are the rest of the files:
server.js:
var static = require('node-static'); var file = new static.Server('./public'); require('http').createServer(function (request, response) { if (!/\./.test(request.url)) { request.url = '/'; } file.serve(request, response); }).listen(3000);
frontend / app.js:
"use strict"; document.getElementById('loginButton').onclick = function() { // ======== Способ 1 (require.ensure) == require.ensure([], function(require) { let login = require('./login'); login(); }, 'auth'); }; document.getElementById('logoutButton').onclick = function() { // ======== Способ 1 (require.ensure) == require.ensure([], function(require) { let logout = require('./logout'); logout(); }, 'auth'); };
frontend / login.js:
'use strict'; module.exports = function() { alert("login"); };
frontend / logout.js:
'use strict'; module.exports = function() { alert("logout"); };
All possible options for connecting dependencies can be found here: https://learn.javascript.ru/screencast/webpack - source.
