webpack
DllPlugin et DllReferencePlugin

Angular 2 AngularJS CSS HTML JavaScript jQuery Node.js React TypeScript Vue.js
Recherche…


Introduction

Les plug-ins Dll et DllReference permettent de scinder le code en plusieurs regroupements de manière à ce que les bundles puissent être compilés indépendamment.

Il est possible de créer des scripts "vendeurs" dans une bibliothèque qui n'a pas besoin d'être compilée souvent (ex: React, jQuery, Bootstrap, Fontawesome ...) et de la référencer dans votre bundle d'applications qui aura besoin de ces scripts.

Le lot d'applications, celui qui sera constamment modifié, se trouvera dans une configuration distincte faisant simplement référence à un ensemble de fournisseurs déjà construit.

Syntaxe

  • nouveau webpack.DllPlugin ({path: '[name] -manifest.json', nom: '[name] _ [hash]'})
  • nouveau webpack.DllReferencePlugin ({context: __dirname, manifest: require ('./ packname-manifest.json')})

Configuration du fournisseur (DllPlugin)

Remarque: La output.library et le name (dans DllPlugin) doivent être identiques. 

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
      { test: /\.s?css$/i, loader: extractCSS.extract(['css-loader?minimize', 'sass-loader']) },
      { test: /\.json$/, loader: 'json-loader' },
    ],
  },
  entry: {
    vendor: [
      'babel-polyfill',
      'font-awesome/scss/font-awesome.scss',
      'bootstrap/scss/bootstrap.scss',
      'jquery',
      'history',
      'react',
      'react-dom',
      'redux',
      'react-redux',
      'react-router',
      'react-router-dom',
      'react-router-redux',
      'redux-thunk',
    ],
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js',
    library: '[name]_[hash]',
  },
  plugins: [
    extractCSS,
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]',
    })
  ].concat(isDevelopment ? [] : [
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      comments: false,
    }),
  ]),
};

Référencement d'un bundle Dll (DllReferencePlugin)

Remarque: le manifest (dans DllReferencePlugin) doit faire référence au path (défini dans DllPlugin) 

const webpack = require('webpack');
const path = require('path');
const isDevelopment = process.env.NODE_ENV !== 'production';

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('app.css');

const merge = require('extendify')({ isDeep: true, arrays: 'concat' });

module.exports = merge({
  context: __dirname,
  entry: {
    app: (isDevelopment ? ['webpack-hot-middleware/client'] : []).concat(['./src/']),
  },
  output: {
    path: path.resolve('./dist'),
    publicPath: '/static',
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader!awesome-typescript-loader?forkChecker=true',
        include: /src|spec/,
      },
      {
        test: /\.s?css$/,
        loader: extractCSS.extract(['css-loader?minimize', 'sass-loader']),
        include: /src/,
      },
    ],
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor-manifest.json'),
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(process.env.NODE_ENV),
      },
    }),
    extractCSS,
  ],
}, isDevelopment ? require('./webpack.config.development') : require('./webpack.config.production'));


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow