Eine kurze Einführung in den Webpack-Packager

Konzept

Webpack ist ein Modul-Bundler für moderne JavaScript-Anwendungen.

Wenn Webpack Ihre Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm (das jedes Modul enthält, das Ihre Anwendung benötigt) und packt diese Module dann in eine Handvoll Budle-Dateien (normalerweise gibt es nur eine, die von geladen wird). je nach Projektsituation im Browser).

Dies ist eine unglaubliche Konfiguration, aber bevor Sie beginnen, müssen Sie nur vier Kernkonzepte verstehen: Eingabe, Ausgabe, Lader und Plugins.

Konfigurationsobjektoptionen
webpack.config.js

const path = require('path');

module.exports = {
  // click on the name of the option to get to the detailed documentation
  // click on the items with arrows to show more examples / advanced options

  entry: "./app/entry", // string | object | array
  // Here the application starts executing
  // and webpack starts bundling

  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "dist"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js?1.1.11", // string
    // the filename template for entry chunks

    publicPath: "/assets/", // string
    // the url to the output directory resolved relative to the HTML page

    library: "MyLibrary", // string,
    // the name of the exported library

    libraryTarget: "umd", // universal module definition
    // the type of the exported library

    /* Advanced output configuration (click to show) */
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)

      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // these are matching conditions, each accepting a regular expression or string
        // test and include have the same behavior, both must be matched
        // exclude must not be matched (takes preferrence over test and include)
        // Best practices:
        // - Use RegExp only in test and for filename matching
        // - Use arrays of absolute paths in include and exclude
        // - Try to avoid exclude and prefer include

        issuer: { test, include, exclude },
        // conditions for the issuer (the origin of the import)

        enforce: "pre",
        enforce: "post",
        // flags to apply these rules, even if they are overridden (advanced option)

        loader: "babel-loader",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide

        options: {
          presets: ["es2015"]
        },
        // options for the loader
      },

      {
        test: "\.html$",

        use: [
          // apply multiple loaders and options
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },

      { oneOf: [ /* rules */ ] },
      // only use one of these nested rules

      { rules: [ /* rules */ ] },
      // use all of these nested rules (combine with conditions to be useful)

      { resource: { and: [ /* conditions */ ] } },
      // matches only if all conditions are matched

      { resource: { or: [ /* conditions */ ] } },
      { resource: [ /* conditions */ ] },
      // matches if any condition is matched (default for arrays)

      { resource: { not: /* condition */ } }
      // matches if the condition is not matched
    ],

    /* Advanced module configuration (click to show) */
  },

  resolve: {
    // options for resolving module requests
    // (does not apply to resolving to loaders)

    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // directories where to look for modules

    extensions: [".js?1.1.11", ".json", ".jsx", ".css?1.1.11"],
    // extensions that are used

    alias: {
      // a list of module name aliases

      "module": "new-module",
      // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      // alias "only-module" -> "new-module", but not "module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js?1.1.11"),
      // alias "module" -> "./app/third/module.js?1.1.11" and "module/file" results in error
      // modules aliases are imported relative to the current context
    },
    /* alternative alias syntax (click to show) */

    /* Advanced resolve configuration (click to show) */
  },

  performance: {
    hints: "warning", // enum
    maxAssetSize: 200000, // int (in bytes),
    maxEntrypointSize: 400000, // int (in bytes)
    assetFilter: function(assetFilename) {
      // Function predicate that provides asset filenames
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: "source-map", // enum
  // enhance debugging by adding meta info for the browser devtools
  // source-map most detailed at the expense of build speed.

  context: __dirname, // string (absolute path!)
  // the home directory for webpack
  // the entry and module.rules.loader option
  //   is resolved relative to this directory

  target: "web", // enum
  // the environment in which the bundle should run
  // changes chunk loading behavior and available modules

  externals: ["react", /^@angular\//],
  // Don't follow/bundle these modules, but request them at runtime from the environment

  stats: "errors-only",
  // lets you precisely control what bundle information gets displayed

  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },

  plugins: [
    // ...
  ],
  // list of additional plugins


  /* Advanced configuration (click to show) */
}

Der Zweck dieses Dokuments besteht darin, ein hohes Maß an bereitzustellen Diese Konzepte Eine Übersicht und gleichzeitig Links zu spezifischen Anwendungsfällen für detaillierte Konzepte.

Eintrag

Webpack erstellt ein Abhängigkeitsdiagramm aller Ihrer Anwendungen. Der Ausgangspunkt dieses Abhängigkeitsgraphen ist der bekannte Einstiegspunkt. Dieser Einstiegspunkt teilt dem Webpack mit, wo es starten und packen soll, basierend auf einem bekannten Abhängigkeitsdiagramm. Sie können sich den Einstiegspunkt Ihrer Anwendung als Kontextstammverzeichnis oder die erste Datei vorstellen, die Ihre Anwendung startet.

Definieren Sie den Einstiegspunkt im Eintragsattribut des Webpack-Konfigurationsobjekts. Ein einfaches Beispiel lautet wie folgt:

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Es gibt mehrere Möglichkeiten, das Eintragsattribut zu deklarieren:

Einzeleintragssyntax

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

2. Objektsyntax

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

3. Mehrseitige Anwendung

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Ausgabe

Sobald Sie den gesamten Code gepackt haben, müssen Sie Webpack noch mitteilen wo man es verpacken soll. Das Ausgabeattribut teilt Webpack mit, wie Ihr Code behandelt werden soll.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Im obigen Beispiel verwenden wir die Attribute output.filename und output.path, um Webpack den Namen und den Pfad der gepackten Datei mitzuteilen

Weitere Konfigurationselemente

Loader

Der Zweck dieses Konfigurationselements besteht darin, dass Webpack sich auf den gesamten Code Ihres Projekts und nicht auf den Browser konzentriert (dies bedeutet nicht, dass sie zusammen gepackt werden). Webpack behandelt jede Datei (.css, .html, .scss, .jpg usw.) als Modul. Allerdings beherrscht Webpack nur Javascript.

Lader im Webpack konvertieren diese Dateien in Module und fügen sie Ihrem Abhängigkeitsdiagramm hinzu.

Generell hat dies zwei Zwecke in Ihrer Webpack-Konfiguration:
1. Um zu identifizieren, welche Dateien mit einem bestimmten Loader konvertiert werden sollen.
2. Die konvertierten Dateien können Ihrem Abhängigkeitsdiagramm hinzugefügt werden.

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};

module.exports = config;

Die obige Konfiguration definiert ein Regelattribut für ein separates Modul. Dieses Modul verfügt über zwei Attribute: Test und Verwendung. Dies weist Webpack an, die folgenden Dinge zu kompilieren:
Bei Verwendung von require() oder import-Anweisungen werden Dateien mit einem .js- oder .jsx-Suffix im Pfad mit Babel-Loader konvertiert und gepackt.

Weitere Konfigurationselemente

Plugins

Da der Loader Konvertierungen nur auf Dateibasis durchführt, sind Plug-Ins die am häufigsten verwendete (aber nicht ausschließlich) Optimierung Verhalten und Sie können Funktionen im Editor oder Block Ihres Paketmoduls (usw.) anpassen.
Das Webpack-Plug-in-System ist äußerst leistungsstark und anpassbar.

Um ein Plugin zu verwenden, müssen Sie nur require() und zum Plugins-Array hinzufügen. Weitere Plugins können mit Optionen angepasst werden. Da Sie ein Plugin in einer Konfiguration mehrfach für unterschiedliche Zwecke verwenden können, müssen Sie eine neue Instanz erstellen.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

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

module.exports = config;

Webpack bietet viele sofort einsatzbereite Plug-Ins! Weitere Informationen finden Sie in unserer Plugin-Liste.

Die Verwendung von Plugins in einer Webpack-Konfiguration ist einfach, es gibt jedoch viele Verwendungsmöglichkeiten, die es wert sind, näher untersucht zu werden.

Weitere Konfigurationselemente

Einfaches Beispiel

var path = require('path');
var webpack = require('webpack');

var env = process.env.NODE_DEV;

var config = {
    entry: {
        consumer: './consumer/index.js',
        admin: './admin/index.js',
        // jquery: ['jquery']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.less$/, loader: 'less-loader!style-loader!css-loader' },
            { test: /\.sass$/, loader: 'sass-loader!style-loader!css-loader' },
            { test: /\.(woff|woff2|eot|ttf|otf)$/i, loader: 'url-loader?limit=8192&name=[name].[ext]' },
            { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url-loader?limit=8192&name=[name].[ext]' },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                include: __dirname,
                options: {
                    presets: ['es2015', 'react']
                },
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                include: __dirname
            },
            {
                test: /\.coffee$/,
                loader: 'coffee-loader',
                exclude: /node_modules/,
                include: __dirname
            }
        ]
    },
    //devtool: 'source-map',
    //指定根路径
    context: __dirname,
    //这里枚举的后缀名，在require时可以省略
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.css']
    },
    plugins: [
        // 这里声明的变量是全局的，可以在所有的js中使用，可以避免写一堆的require
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
            'React': 'react',
            'ReactDOM': 'react-dom'
        }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     // 与 entry 中的 jquery 对应
        //     name: 'jquery',
        //     // 输出的公共资源名称
        //     filename: 'jquery.min.js',
        //     // 对所有entry实行这个规则
        //     minChunks: Infinity
        // }),
        // new webpack.NoEmitOnErrorsPlugin()
    ],
    //在html页面中使用script标签引入库，而不是打包到*.bundle.js文件中
    externals: {
        jquery: 'jQuery',
        react: 'React',
        'react-dom' : 'ReactDOM'
    }
};

//如果是生产环境，要最小化压缩js文件
if (env === 'production') {
    //打包时对js文件进行最小化压缩
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        mangle: {
            except: ['$super', '$', 'exports', 'require']
            //以上变量‘$super’, ‘$’, ‘exports’ or ‘require’，不会被混淆
        },
        compress: {
            warnings: false
        }
    }));
    //消除压缩后的文件在界面引用时发出的警告
    config.plugins.push(new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }));
}

module.exports = config;

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in den Webpack-Packager. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!