Webpack

preface

There has been a period of time did not accumulate and study, the recent study of the content will be updated in one after another.

Webpack should write a series, from the initial => in-depth => actual combat.

Watch “Hello FE” for more straightforward content.

Context

When looking for a relative path, Webpack will use context as the root directory. The default context value is the Webpack startup path. You can manually change the context value if you need to:

const path = require('path');

module.exports = {
  context: path.join(__dirname, 'src');
}
Copy the code

The Context type

Now change the relative path to the root directory of SRC, and use the relative path to look up from the SRC directory. For example, for the entry above, it will look up from the SRC directory, which is SRC /index.js.

Entry

Entry is the entry point for Webpack configuration modules. Webpack starts building by recursively parsing all dependent modules from the entry file.

Here’s an example:

const path = require('path');

module.exports = {
  devtool: false.mode: 'development'.entry: './index.js'.output: {
    filename: 'bundle.js'.path: path.join(__dirname, '/'),}};Copy the code

const module1 = require('module1');

module1();
Copy the code

function module1() {
  console.log('module1');
}

module.exports = module1;
Copy the code

Webpack builds from index.js, resolves dependencies to Module1, and packages the module1 code into bundle.js.

Such as:

function module1() {
  console.log('module1');
}

module1();
Copy the code

Entry type

Entry description

• dependOn: Indicates the entry file that the current entry file depends on. That is, the dependent entry file must be loaded before the entry file is loaded
• filename: Specifies the name of the output file after the current entry file is built
• import: The module that is sandwiched when the build starts
• library: Configuration entry file options
• runtimeRun:chunkIf this option is set, a runtime with the same name will be createdchunkOtherwise the entry file will be used as the runtime

Such as:

module.exports = {
  entry: {
    index: './index.js'.main: {
      dependOn: 'index'.import: './main.js',}}};Copy the code

The build will wait until the index build is complete before starting the main build.

For a single entry, dependOn and Runtime cannot exist simultaneously:

module.exports = {
  entry: {
    index: './index.js'.main: {
      dependOn: 'index'.runtime: 'other'.import: './main.js',}}};Copy the code

This situation does not meet the requirements, will report an error.

For a single entry, Runtime cannot be an existing entry file name:

module.exports = {
  entry: {
    index: './index.js'.main: {
      runtime: 'index'.import: './main.js',}}};Copy the code

This situation also does not meet the requirements, will report an error.

Beware of circular dependencies:

module.exports = {
  entry: {
    index: {
      dependOn: 'main'.import: './index.js',},main: {
      dependOn: 'index'.import: './main.js',}}};Copy the code

In this case, circular dependencies are generated and errors are also reported.

The instance

Here are some examples that would be used in a production environment:

Separate code and dependencies

module.exports = {
  entry: {
    main: './src/app.js'.vendor: './src/vendor.js',}};Copy the code

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',}};Copy the code

module.exports = {
  output: {
    filename: '[name].bundle.js',}};Copy the code

Doing so is telling Webpack that two separate chunks need to be packaged.

The advantage of doing this is that you can place dependencies (such as jQuery Bootstrap) in a vendor that will not change at all, and these dependencies will be bundled together to produce a chunk. Since these dependencies are essentially unchanged, the contenthash for these dependencies will not change, which will better optimize the browser cache.

Multi-page application

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js'.pageTwo: './src/pageTwo/index.js'.pageThree: './src/pageThree/index.js',}};Copy the code

Doing so is telling Webpack that three separate chunks need to be packaged.

In multi-page applications, a new HTML document is retrieved every time a page is visited. When the new HTML document is loaded, the resource is re-downloaded.

To solve this problem, Webpack provides the ability to create common bundles across pages, like optimization.splitChunks. As the number of entries to multi-page applications increases, the benefits of this code reuse mechanism will increase.

chunkThe name of the

1. ifentryA type ofstringorarrayI’m only going to generate onechunk, and the name ismain;
2. ifentryA type ofobjectIs generatedchunk, the name forobject 的 key;

Dynamic Entry Configuration

If you need to configure an entry dynamically, you can set the entry as a function that supports both synchronous and asynchronous:

module.exports = {
  / / synchronize
  entry: function syncEntry() {
    return {
      index: './index.js'.main: './main.js'}; },/ / asynchronous
  entry: function asyncEntry() {
    return new Promise(function (resolve) {
      resolve({
        index: './index.js'.main: './main.js'}); }); }};Copy the code

Multiple entry configuration

If you need to create multiple chunks, or if you are using a plug-in like CommonsChunkPlugin, you should replace the filename with template syntax to ensure that each chunk has a separate name.

module.exports = {
  entry: {
    app: './src/app.js'.search: './src/search.js',},output: {
    filename: '[name].js',}};Copy the code

Output

Output is an option for Webpack to configure information such as the name of the output file, path, and so on. For multiple entries, only one output needs to be configured.

The most basic usage requires only one filename option:

module.exports = {
  output: {
    filename: 'bundle.js',}};Copy the code

This configuration will output bundle.js in the dist directory.