Wk-notes-02-06-more-webpack

Webpack from scratch, again

Practice 2, webpack-official-guide

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.

// ...
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
}));
// ...