Meteor-Webpack provides you a development environment that integrates modern web bundler Webpack, and modern perfect full-stack JavaScript framework Meteor.
You need just one atmosphere package to start;
ardatan:webpack
This project includes some examples with popular Frontend frameworks and a compiler package that replaces Meteor's bundler with modern web project bundler Webpack.
You have to create a webpack.config.js
file that has the compilation configurations for both client and server code.
You are to free to choose the directory structure in your project, Webpack will compile your project regarding to your entry definition.
Meteor-Webpack would make you feel you are using Webpack CLI. Just use same cases in Webpack's own documentation.
Meteor-Webpack can resolve any atmosphere packages and Meteor modules like you are using without Meteor-Webpack
import module from 'module'
,to CommonJS import syntax; const module = require('module')
.connect
-compatible HTTP ServerRegular Meteor Bundler uses babel
which tranpiles your ES2015 syntax to ES5 even imports to CommonJS
which creates some limitation for you. For instance, you cannot use ES2015 modules, then you need to import UMD modules which would probably contain unused submodules of this module.
Despite you can use atmosphere packages with Meteor-Webpack, you don't need to add extra atmosphere packages for sass, typescript and others' compilation. For an extra compiler such as sass, less and pug etc; you can just install necessary webpack loader plugins, and add them into webpack.config.js
. Meteor-Webpack runs exactly same way with webpack-dev-server
.
As in its documentation;
meteor-client-bundler
is a module bundler which will take a bunch of Atmosphere package and put them into a single module, so we can load Meteor's client scripts regardless of what framework we're using to run our server.
But you cannot use this client bundle with Server Side Rendering, and you must have two different projects which run on two different servers.
With Meteor-Webpack, you can extract webpack.config.js
from Angular CLI, create-react-app
and any other CLI tools', then easily use it with Meteor.
meteor remove ecmascript es5-shim static-html
package.json
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
}
}
yarn
or npm
webpack
by the command meteor add ardatan:webpack
webpack.config.js
, and define entry module which is necessary for webpack.target
field by node
value in the configuration object you want to use as server's; const clientConfig = {
//...
}
const serverConfig = {
//...
target: 'node',
}
import { Meteor } from 'meteor/meteor'
, import { Mongo } from 'meteor/mongo'
and also non-global package references such as import { publishComposite } from 'meteor/reywood:publish-composite'
. You have to install webpack-meteor-externals
npm package, and add it to both client and server entries in webpack.config.js
. meteor npm install webpack-meteor-externals --save-dev
const meteorExternals = require('webpack-meteor-externals');
//...
externals: [
meteorExternals()
]
//...
webpack.config.js
//...
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './'), // enables you to use 'imports/...' instead of '/imports/...'
],
alias: {
'/imports': path.resolve(__dirname, './imports'),
'/ui': path.resolve(__dirname, './ui'),
// ... and any other directories you might have
}
}
//...
If you want to use Webpack's Development Server instead of Meteor's, you have to add devServer
field in the client configuration;
devServer: {}
then you have to add another atmosphere package to packages;
meteor add ardatan:webpack-dev-middleware
NOTE Make sure ardatan:webpack-dev-middleware
is at the bottom of your .packages
list for the best compatibility with other Meteor packages.
don't forget to install webpack-dev-middleware
package from NPM;
meteor npm install webpack-dev-middleware --save-dev
webpack-node-externals
meteor npm install webpack-node-externals --save-dev
webpack.config.js
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
Process is the same with Webpack; so you have to just change your client and server configuration;
Add hot
field for both client and server which is true
,
devServer: {
hot: true
}
hot: true
is enough for server-side HMR! plugins: {
new webpack.HotModuleReplacementPlugin()
}
Then install webpack-dev-middleware
,
Install client-side HMR middleware webpack-hot-middleware
in your project
Install server-side HMR middleware webpack-hot-server-middleware
in your project
Meteor's bundler may restart your server which is not good for HMR's working process; so we need to disable it by adding .meteorignore
on the root with the following content;
*
!.meteor/
!node_modules/
!webpack.config.js
server-render
will work as expected if you use webpack to include HTML via HtmlWebpackPlugin
. Important: Be sure that server-render is listed BELOW webpack-dev-server in meteor/packages
WebAppInternals.registerBoilerplateCallback
to dynamically change the CSS and JS served to visitors via data.js
and data.css
. In order to use this feature with webpack, you must set inject: false
on HtmlWebpackPlugin
and set the environment variable DYNAMIC_ASSETS=true
.meteor deploy
command doesn't set NODE_ENV=production
environment variable. That's why, webpack
compiler recognizes that it is still a development
build. You have two options to fix issue;
GALAXY_NODE_OPTIONS=--production
to make webpack
recognize that it is a production
build.webpack
which doesn't contain development settings such as devServer
, and includes UglifyJs
plugins. Then, set environment variable WEBPACK_CONFIG_FILE=<filename>
.Using meteor test
requires the option --test-app-path $(pwd)/.meteortest
. This will run the test inside the .meteortest
directory in your project. Normally, meteor test
runs a test version of the application inside your /tmp
directory, but webpack needs to be able to access the project's node_modules
folder.
You may also run into permissions issues after the .meteortest
folder is created. I recommend adding rm -r .meteortest
to the beginning of your test command.
All DDP connections are closed when the dev server recompiles in test mode. This will trigger testing libraries that use DDP (Chimpy) to re-run if they are in watch mode.