webpack
DllPlugin y DllReferencePlugin

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


Introducción

Los complementos Dll y DllReference permiten que el código se divida en varios paquetes de una manera que los paquetes se pueden compilar de forma independiente.

Es posible crear scripts de "proveedores" en una biblioteca que no necesita compilarse a menudo (por ejemplo, React, jQuery, Bootstrap, Fontawesome ...) y hacer referencia a ellos en el paquete de aplicaciones que los necesitará.

El paquete de la aplicación, el que se cambiará constantemente, estará en una configuración separada que solo hará referencia a un paquete "vendedor" ya creado.

Sintaxis

  • nuevo webpack.DllPlugin ({ruta: '[nombre] -manifest.json', nombre: '[nombre] _ [hash]'})
  • nuevo webpack.DllReferencePlugin ({context: __dirname, manifest: require ('./ packname-manifest.json')})

Configuración del proveedor (DllPlugin)

Nota: La output.library y la output.library y el name (en DllPlugin) deben ser los mismos. 

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,
    }),
  ]),
};

Hacer referencia a un paquete Dll (DllReferencePlugin)

Nota: manifest (en DllReferencePlugin) debe hacer referencia a la path (definida en 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
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow