WEBPACK3 Learning 3--Management output

So far, we have manually introduced all of the resources in the index.html file, but as the application grows, and once the file name is started with hash (hash)] and multiple bundles are output, it becomes difficult to manage the index.html files manually. However, some plugins can make the process easier to manipulate.

According to Webpack3 Learning to manage resources, we will have a small project. But in order to facilitate learning webpack management output, here will use WEBPACK3 learning to start the project Demo1. Pre-prepared

First add Print.js in src directory

  Webpack-demo
  |-Package.json
  |-webpack.config.js
  |-/dist
  | |/src
    | index.js
+   | Print.js
  |-/node_modules

Print.js as follows:

Export default function PrintMe () {
  console.log (' I get called from print.js! ');
}

and use this function in the Src/index.js file:

Import _ from ' Lodash ';
Import printMe from './print.js ';

function component () {
    var element = document.createelement (' div ');
    var btn = document.createelement (' button ');
    element.innerhtml = _.join ([' Hello ', ' webpack '], ');
    btn.innerhtml = ' Click me and check the console! ';
    Btn.onclick = printMe;
    Element.appendchild (BTN);
    return element;
}

Document.body.appendChild (component ());

We also want to update the dist/index.html file to prepare for the webpack separation Portal:
Dist/index.html

<! DOCTYPE html>
 
Now adjust the configuration. We will add src/print.js as the new entry starting point (print) in entry, and then modify the output to dynamically generate the bundle name based on the entry start name:
Webpack.config.js

var path = require (' path ');
Module.exports = {
  entry: {
    app: './src/index.js ',
    print: './src/print.js '
  },
  output: {
    FileName: ' [name].bundle.js ',
    path:path.resolve (__dirname, ' dist ')
  }
};
 
Run

NPM Run Build
http-server
 
The browser accesses the http://localhost:8080/dist/and clicks the button to see the console print.
As we can see, Webpack generates Print.bundle.js and app.bundle.js files in the Dist directory, which corresponds to the file names we specify in the index.html file.

However, if we change the name of one of our entry beginnings, and even add a new name, what happens. The generated package will be renamed in a build, but our index.html file will still refer to the old name. We use Htmlwebpackplugin to solve the problem. Set Htmlwebpackplugin

Install the plugin first, and adjust the Webpack.config.js file:

CNPM Install--save-dev Html-webpack-plugin
 
To adjust the Webpack.config.js file:

Const PATH = require (' path ');
Const Htmlwebpackplugin = require (' Html-webpack-plugin ');
Module.exports = {
  entry: {
    app: './src/index.js ',
    print: './src/print.js '
  },
  plugins: [
    New Htmlwebpackplugin ({
      title: ' Output Management '
    )
  ],
  output: {
    filename: ' [name].bundle.js ' ,
    path:path.resolve (__dirname, ' dist ')
  }
;
 
Before building, you should understand that although we already have index.html this file in the dist/folder, Htmlwebpackplugin will still generate index.html file by default. This means that it will replace our original with the newly generated index.html file. Let's look at what happens after the NPM run build is executed.
If you index.html open in the Code Editor, you'll see Htmlwebpackplugin created a completely new file, and all the bundles are automatically added to the HTML

<! DOCTYPE html>
 
Clean up the/dist folder 
As you may have noticed, the legacy of past operations and code samples has caused our/dist folder to be quite cluttered. Webpack generates files and places them in the/dist folder, but Webpack cannot track which files are actually used in the project.

In general, cleaning up the/dist folder before each build is a recommended practice, so only the files used will be generated. Let's complete this requirement.

Clean-webpack-plugin is a more popular management plugin that lets us install and configure under.

CNPM Install Clean-webpack-plugin--save-dev
 
Webpack.config.js Configuration Cleanwebpackplugin

Const PATH = require (' path ');
Const Htmlwebpackplugin = require (' Html-webpack-plugin ');
Const Cleanwebpackplugin = require (' Clean-webpack-plugin ');
Module.exports = {
  entry: {
    app: './src/index.js ',
    print: './src/print.js '
  },
  plugins: [
    New Cleanwebpackplugin ([' Dist ']),
    new Htmlwebpackplugin ({
      title: ' Output Management '
    })
  ],
  Output: {
    filename: ' [name].bundle.js ',
    path:path.resolve (__dirname, ' dist ')
  }
};
 
Now execute the NPM run build, and then check the/dist folder. If all goes well, you should now never see the old files again, only the files that were built after the build.

This article source code address: Https://github.com/wu-boy/webpack-demo,demo3 directory.

The rest of the study content is temporarily not updated, Webpack official website has a detailed tutorial, available for learning.

Resources:
1.webpack Chinese web