hugo/blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updating documentation

Browse Source
This commit is contained in:
Daniel Tomlinson
2020-05-25 06:18:03 +01:00
parent 5ab8126648
commit fc563534c1
1 changed files with 110 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
blog/webpack-structure.md
View File

@@ -14,7 +14,7 @@ Create an empty `package.json` file:
Run `yarn add --dev webpack webpack-cli` to install webpack locally and add it as a dev dependency to your `package.json`.
You should add `main`, `license` and `scripts` to the `package.json` object. At this point your `package.json` should look like:
You should add `main`, `license` and `scripts` to the `package.json` object. Your scripts object should contain the commands for `build` and `watch` using webpack. At this point your `package.json` should look like:
```json
{
@@ -49,3 +49,112 @@ At this point your `./src` directory should look like:
├── main.js
└── scss
```
You should create your webpack config files: <https://webpack.js.org/guides/production/>.
Create `webpack.common.js` and `webpack.prod.js` in the root of your project next to your `package.json`.
### webpack.common.js
This file is for code common between environments.
This file should contain:
| Package | Command | Description |
| -------------------- | ------------------------------- | ----------------------------------------- |
| `CleanWebpackPlugin` | `yarn add clean-webpack-plugin` | Empties folders after each webpack build. |
A bare basic config should look like:
```javascript
const webpack = require("webpack");
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development",
devtool: "source-map",
entry: path.resolve(__dirname, "src/main.js"),
output: {
path: path.resolve(__dirname, "dist"),
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ["dist/*"],
}),
],
};
```
#### extras
| Package | Command | Description |
| ----------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AssetsPlugin` | `yarn add assets-webpack-plugin` | Exports a `json` file containing a mapping for dynamically importing webpack outputs into `HTML`.|
| `webpack.ProvidePlugin` | `yarn add` the plugin you want to provide. | This functionality of webpack will make a library available everywhere in your javascript, without you having to import them individually in each file. Use this if you need a library available across multiple files. |
| `babel-loader` | `yarn add babel-loader @babel/core @babel/preset-env` | Babel will transform ES javascript into browser compatible javascript. We use `babel-loader` as a `module` in `webpack` module. We transform any `.mjs` files that will be resolved when we import a library and we exclude `node_modules`. |
The final `module.exports` looks like:
```javascript
module.exports = {
mode: "development",
devtool: "source-map",
entry: path.resolve(__dirname, "src/main.js"),
output: {
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ["dist/*"],
}),
new AssetsPlugin({
filename: "assets.json",
path: path.resolve(__dirname, "data/panaetius-theme"),
prettyPrint: true,
fullPath: false,
}),
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
}),
],
};
```
### webpack.prod.js
This file is for production builds.
| Package | Command | Description |
| --------------- | ------------------------ | ----------------------------------------------- |
| `webpack-merge` | `yarn add webpack-merge` | Merge webpack configs for common, dev and prod. |
A bare basic config should look like:
```javascript
const webpack = require("webpack");
const common = require("./webpack.common");
const merge = require("webpack-merge");
module.exports = merge(common, {
mode: "production",
devtool: "none",
output: {
filename: "[name].[contenthash].min.js",
chunkFilename: "[id].[name].[contenthash].min.js",
publicPath: "dist/",
},
});
```
The output files are using dynamic naming in `webpack`. We include the `contenthash` in the files to assist with caching. If you don't want to use dynamic importing, you can take this out for semi-static naming. Alternatively, use optimization settings to only output 1 `css` and `js` file - but for large files this will be unoptimal.