> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/2020/wk-notes-02-06-more-webpack.md).

# Wk-notes-02-06-more-webpack

### Webpack from scratch, again

[**Practice 2, webpack-official-guide**](https://webpack.js.org/guides/getting-started/)

**Problems html loading scripts**

* It is not immediately apparent that the script depends on an external library.
* If a dependency is missing, or included in the wrong order, the application will not function properly.
* If a dependency is included but not used, the browser will be forced to download unnecessary code.

Webpack is a bundler, it by default only do moduling with esmodule.

> Note that webpack will not alter any code other than `import` and `export` statements.

> webpack will **dynamically bundle** all dependencies (creating a dependency graph). Every module now explicitly states its dependencies and we'll avoid bundling modules that aren't in use.

**Assets**

1. css: `style-loader`, `css-loader`; css `url('URL')` will be transform to **output bundled assets**(img url/font url)
2. img: jpg/png/gif/svg > `file-loader`
3. font: woff/eoft... > `file-loader`
4. data:
   * json `built-in`, **default import only** `import data from './data.json';`
   * csv/tsv > `csv-loader`
   * xml > `xml-loader`

### **Output management**

Use `entry` and `output`, we can create separate bundles, from different entry files. Using `output.filename = [name].bundle.js` is the simplest way to generate bundle name with app/bundle name intepolation.

For complex multi bundling, we use `HtmlWebpackPlugin`. It **auto links script src names with webpack bundles entry app name**.

### **Development mode**

* Source-map `devtool: inline-source-map`
* `webpack --watch`
* `webpack-dev-server --open`: With config in `devServer`, it offers simple live reloading over webpack bundling
* `webpack-dev-middleware`: use middleware to set up a express server for more customizable dev-server.

```javascript
// ...
const config = require('./webpack.config');
​
const compiler = webpack(config);
​
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));
// ...
```