webpack
DllPlugin en DllReferencePlugin

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


Invoering

Met de plug-ins Dll en DllReference kan de code in meerdere bundels worden opgesplitst zodat de bundels onafhankelijk kunnen worden gecompileerd.

Het is mogelijk om "leveranciersscripts" te bouwen in een bibliotheek die niet vaak hoeft te worden gecompileerd (bijv. React, jQuery, Bootstrap, Fontawesome ...) en ernaar te verwijzen in uw app-bundel die deze scripts nodig heeft.

De applicatiebundel, degene die constant zal worden gewijzigd, zal in een aparte configuratie zijn die alleen verwijst naar een reeds gebouwde "leveranciersbundel".

Syntaxis

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

Leveranciersconfiguratie (DllPlugin)

Opmerking: de output.library en de name (in DllPlugin) moeten hetzelfde zijn. 

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

Verwijzen naar een Dll-bundel (DllReferencePlugin)

Opmerking: manifest (in DllReferencePlugin) moet verwijzen naar path (gedefinieerd in 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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow