Create a directory, cd into it and add webpack
$ mkdir mysite && cd mysite
$ yarn add webpack
The basic website structure:
$ tree -I 'node_modules' .
.
├── dist
│ ├── 36d1e2706cfa9b1a848601128ee24d63.png
│ ├── bundle.js
│ └── index.html
├── package.json
├── src
│ ├── index.js
│ ├── star.png
│ └── style.css
├── webpack.config.js
└── yarn.lock
A basic webpack config file webpack.config.js
:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
Executing a webpack bundle:
$ npx webpack
- Entry: The main source files (manifest files) that Webpack uses as an entry point
- Output: The resulting compiled files
- Loaders: These handle things like transpolation. So processing from ES6 or SASS to something that the browser can understand.
- Plugins: from the documentation, "While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks."
HtmlWebpackPlugin
: The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags.clean-webpack-plugin
: A webpack plugin to remove/clean your build folder(s) before building
Use the bable loader:
$ yarn add bable-loader babel-core babel-preset-env