Une brève introduction au packager webpack

Concept

Webpack est un bundler de modules pour les applications JavaScript modernes.

Lorsque Webpack traite votre application, il crée de manière récursive un graphe de dépendances (contenant tous les modules dont votre application a besoin), puis regroupe ces modules dans une poignée de fichiers Budle (généralement, il n'y en a qu'un seul, qui sera chargé par le navigateur, en fonction de la situation du projet).

C'est une configuration incroyable, mais avant de commencer, il vous suffit de comprendre quatre concepts de base : l'entrée, la sortie, les chargeurs et les plugins.

Options des objets de configuration
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) */
}

Le but de ce document est de fournir un haut niveau de ces concepts Un aperçu, tout en fournissant des liens vers des cas d'utilisation spécifiques pour des concepts détaillés.

Entry

webpack crée un graphe de dépendances de toutes vos applications. Le point de départ de ce graphe de dépendances est le point d’entrée connu. Ce point d'entrée indique à Webpack par où commencer et le conditionner en fonction d'un graphique de dépendances connu. Vous pouvez considérer le point d'entrée de votre application comme la racine du contexte ou le premier fichier qui démarre votre application.

Définissez le point d'entrée dans l'attribut d'entrée de l'objet de configuration du webpack. Un exemple simple est le suivant :

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

Il existe plusieurs façons de déclarer l'attribut d'entrée :

1. Syntaxe à entrée unique

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

module.exports = config;

2. Syntaxe des objets

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

3. Application multipage

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

Sortie

Une fois que vous avez empaqueté tout le code, vous devez toujours indiquer à Webpack où l'emballer. L'attribut de sortie indique à Webpack comment traiter votre code.

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'
  }
};

Dans l'exemple ci-dessus, nous utilisons les attributs output.filename et output.path pour indiquer à Webpack le nom et le chemin du fichier emballé

Plus d'éléments de configuration

Chargeurs

Le but de cet élément de configuration est de permettre à webpack de se concentrer sur tout le code de votre projet au lieu du navigateur (cela ne signifie pas qu'ils seront empaquetés ensemble). webpack traite chaque fichier (.css, .html, .scss, .jpg, etc.) comme un module. Cependant, webpack ne connaît que javascript.

Les chargeurs du webpack convertiront ces fichiers en modules et les ajouteront à votre graphique de dépendances.

À un niveau élevé, cela a deux objectifs dans la configuration de votre webpack :
1. Identifier quels fichiers doivent être convertis avec un certain chargeur.
2. Les fichiers convertis peuvent être ajoutés à votre graphique de dépendances.

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;

La configuration ci-dessus définit un attribut de règles pour un module distinct. Ce module a deux attributs : test et utilisation. Cela indique à Webpack de compiler les éléments suivants :
Lors de l'utilisation d'instructions require() ou import, les fichiers avec un suffixe .js ou .jsx dans le chemin sont convertis et empaquetés à l'aide de babel-loader.

Plus d'éléments de configuration

Plugins

Étant donné que le chargeur n'effectue des conversions que par fichier, les plug-ins sont l'optimisation la plus couramment utilisée (mais sans s'y limiter) comportement, et vos fonctions personnalisées peuvent être définies dans des éditeurs ou des blocs de vos modules packagés (etc.).
Le système de plug-in webpack est extrêmement puissant et personnalisable.

Pour utiliser un plugin, il vous suffit de require() et de l'ajouter au tableau des plugins. Plus de plugins peuvent être personnalisés avec des options. Puisque vous pouvez utiliser un plugin plusieurs fois dans une configuration à des fins différentes, vous devrez créer une nouvelle instance.

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 fournit de nombreux plugins prêts à l'emploi ! Plus d’informations peuvent être obtenues à partir de notre liste de plugins.

L'utilisation de plugins dans une configuration Webpack est simple, mais il existe de nombreuses utilisations qui méritent d'être explorées plus en détail.

Plus d'éléments de configuration

Exemple simple

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;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!