<head>
...
<script src="main.js"></script>
<!-- 3kb -->
</head>
<head>
...
<script src="main.js"></script>
<!-- 100kb -->
</head>
<head>
...
<script src="jquery.js" />
<script src="main.js" />
<script src="login.js" />
<script src="map.js" />
<script src="contact.js" />
<!-- smaller pieces -->
</head>
<head>
...
<script src="/dist/main.min.js" />
</head>
source: http://www.lakearrowhead.com/
Entry
Output
Loaders
Plugins
module.exports = {
entry: './src/main.js'
};
// will default check node_modules to resolve
module.exports = {
entry: {
main: './src/main.js',
vendors: ['jquery', 'jquery.tablesorter.js']
}
};
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
}
};
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
const path = require('path');
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
};
module.exports = config;
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const config = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
};
module.exports = config;
https://webpack.js.org/