A summary of the getting started page of Webpack.
See also: How to develop, publish and use a javascript library ?
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/myDependency@version"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
In this setup:
npm install --save-dev webpack
npm install --save myDependency
import myDep from 'myDependency'
// ..... Use it
By stating what dependencies a module needs, webpack can use this information to build a dependency graph.
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
cd ProjectDirectory
.\node_modules\.bin\webpack.cmd src/index.js dist/bundle.js
Hash: 3f6631d7336776a04600
Version: webpack 3.6.0
Time: 2450ms
Asset Size Chunks Chunk Names
bundle.js 744 kB 0 [emitted] [big] main
[169] ./src/index.js 174 bytes {0} [built]
+ 459 hidden modules
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
cd ProjectDirectory
.\node_modules\.bin\webpack.cmd --config webpack.config.js
{
...
"scripts": {
"build": "webpack"
},
...
}
npm run build