Webpack simple notes

Entrance and exit configuration

1: entry and exit, generally single page application, there is only one program to start the entry and exit output:

const config = {
// Just pass entry a string
  entry: './path/to/my/entry/file.js'.output: {
    filename: 'bundle.js'.path: '/home/proj/public/assets'}};module.exports = config;
Copy the code

2: But to build a multi-page application, the entry and output configurations are as follows:

const config = {
// Entry pass a collection of objects
  entry: {
    A: './src/A/index.js'.B: './src/B/index.js'.C: './src/C/index.js'
  },
  output: {
  // the [name] placeholder ensures that each file has a unique name, __dirname, which refers to the current directory name
    filename: '[name].js'.path: __dirname + '/dist'
  }
   // Write to disk:./dist/ a.js,./dist/ b.js,./dist/ c.js
};
Copy the code

3: Use the CDN and resource hash to configure:

output: {
  path: "/home/proj/cdn/assets/[hash]".publicPath: "http://cdn.example.com/assets/[hash]/"
}
Copy the code

Development mode

module.exports = {
  mode: 'production | development'
};
Copy the code

Loader and plugins

1: Understand loader: Webpack only has the ability to parse JS and JSON, so it is necessary to use Loader to convert the source code of various modules, such as TypeScript into JavaScript, images into data URL, CSS into modules that comply with the Common JS specification and so on.

Plugins: Used for file compression, extraction, packaging optimization.

Excessive use of Loaders and plugins can lead to a bloated and complex webpack project configuration and even slow packaging. Updating the Webpack version can also cause a plugins or loader to report an error.

2: configuration

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Install via NPM
const webpack = require('webpack'); // Access the built-in plug-in
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js'.output: {
    filename: 'my-first-webpack.bundle.js'.path: path.resolve(__dirname, 'dist')},module: {
    rules: [{test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader'.options: {
              modules: true}}]}]},plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'}})];module.exports = config;
Copy the code

Working mechanism

1: The basic webpack configuration follows the Common JS specification (by using require(…)) Method import file, use other tool functions), export an object’s Js file. Module. exports = config, which is an array of objects, when multiple targets are needed.

2: Basic elements

Module is the basic condition for webPack to run;

Module path is a necessary condition for parsing modules;

The Manifest file is used to guide module packaging and loading (it contains the logic for loading and processing modules);

Module Hot Module Replacement (HMR-Hot Module Replacement), the Hot update function is mainly to change the Module loading logic in the manifest file.

3:

The packaging and loading logic of Webpack lies in the manifest file, which includes the loading and processing logic between modules. The loading and processing logic between modules is derived from related references (import, require, etc.) between modules. Hot update is to change the logic in the manifest file.

A link to the

TreeShaking and WebPack basic configuration

Webpack Chinese website

Webpack uses loaders and plugins