Question

我有一个项目，我的代码是app目录。 / app和/ node_modules都在同一目录中。

在我的webpack配置中，上下文和根解析都设置为app目录。

在我的.jsx文件中，无论/ app中的哪个文件夹，我都可以使用

导入任何node_module

从'module-name'

导入{item}

现在我为dll创建了一个新的webpack文件。其DLLPlugin中的上下文再次设置为app目录。当我将dll导入到项目的webpack中时，我再次使用app的路径作为DllReferencePlugin中的上下文。

我无法在这里看到我的错误，但app.js仍包含所有DLL代码。我确定问题是不正确的背景，但不确定在哪里开始修复它。

我似乎无法从文档中找到答案，因为它并没有真正告诉我需要做什么。

我的webpack文件如下（均位于web / webpack / web目录中）。

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var InlineEnviromentVariablesPlugin = require('inline-environment-variables-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: 4 });


var assetsPath = path.join(__dirname, '..', '..', 'public');
var publicPath = '/';

var babelrc = {
      'presets': ['es2015', 'react', 'stage-0'],
      'plugins': [
        'transform-decorators-legacy',
        'transform-object-assign',
        'transform-object-entries',
        'transform-react-remove-prop-types',
        'transform-react-constant-elements'
      ]
    };



var commonLoaders = [
  {
    test: /\.js$|\.jsx$/,
    loader: 'happypack/loader?id=babel',
    exclude: [
      path.join(__dirname, '..', '..', '..', 'node_modules'),
      path.join(__dirname, '..', '..', '..', 'node_modules', 'react-d3-shape', '.babelrc')
    ],
    include: [
      path.join(__dirname, '..', '..', '..', 'app'),
      path.join(__dirname, '..', '..', '..', 'node_modules', 'react-d3-shape', 'lib', 'components', 'pie.js')
    ]
  },
  { test: /\.json$/, loader: 'happypack/loader?id=json' },
  {
    test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url',
    query: {
        name: '[hash].[ext]',
        limit: 10000,
    }
  },
  {
    test: /\.css$/, exclude: ['/vendors/'],
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?module&importLoaders=1&localIdentName=[name]--[local]-[hash:base64:5]!postcss-loader')
  }
];


function createHappyPlugin(id, loaders) {
  return new HappyPack({
    id: id,
    loaders: loaders,
    threadPool: happyThreadPool,
    cache: true,
    verbose: true,
  });
}


var postCSSConfig = function() {
  return [
    require('postcss-import')(),
    require('postcss-mixins')(),
    require('postcss-custom-media')(),
    require('postcss-simple-vars')(),
    require('postcss-nested')(),
    require('autoprefixer')({
      browsers: ['last 2 versions', 'IE > 8']
    }),
    require('postcss-reporter')({
      clearMessages: true
    })
  ];
};

module.exports = [
  {
    name: 'browser',
    context: path.join(__dirname, '..', '..', '..', 'app'),
    entry: {
      app: './client'
    },
    output: {
      path: assetsPath,
      filename: '[name].js',
      publicPath: publicPath
    },

    module: {
      loaders: commonLoaders
    },
    resolve: {
      root: [path.join(__dirname, '..', '..', '..', 'app')],
      extensions: ['', '.js', '.jsx', '.css']
    },
    plugins: [
        new ExtractTextPlugin('styles/bundled-modules.css'),
        new CopyWebpackPlugin([
            { from: 'fonts/', to: 'fonts/' },
            { from: '_web/css/global/fonts.css', to: 'styles/fonts.css' },
            { from: '_web/css/vendors', to: 'styles/vendors' },
        ]),
        new webpack.DllReferencePlugin({
          context: path.join(__dirname, '..', '..', '..'),
          manifest: path.join(assetsPath, "vendor-manifest.json"),
          content: ['./client.jsx']
        }),
        new webpack.DefinePlugin({
          __DEVCLIENT__: false,
          __DEVSERVER__: false,
          __PLATFORM_WEB__: true,
          __PLATFORM_IOS__: false
        }),
        new InlineEnviromentVariablesPlugin({ NODE_ENV: 'production' }),
        createHappyPlugin('babel', ['babel-loader?'+JSON.stringify(babelrc)]),
        createHappyPlugin('json', ['json-loader'])
    ],
    postcss: postCSSConfig
  }, {
    name: 'server-side rendering',
    context: path.join(__dirname, '..', '..', '..', 'app'),
    entry: {
      server: './server'
    },
    target: 'node',
    output: {
      path: assetsPath,
      filename: 'server.js',
      publicPath: publicPath,
      libraryTarget: 'commonjs2'
    },
    module: {
      loaders: commonLoaders
    },
    resolve: {
      root: [path.join(__dirname, '..', '..', '..', 'app')],
      extensions: ['', '.js', '.jsx', '.css']
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new ExtractTextPlugin('styles/bundled-modules.css'),
        new CopyWebpackPlugin([
          { from: 'images/', to: 'images/' },
          { from: 'fonts/', to: 'fonts/' },
          { from: '_web/css/global/fonts.css', to: 'styles/fonts.css' },
        ]),
        new webpack.DefinePlugin({
          __DEVCLIENT__: false,
          __DEVSERVER__: false,
          __PLATFORM_WEB__: true,
          __PLATFORM_IOS__: false
        }),
        new InlineEnviromentVariablesPlugin({ NODE_ENV: 'production' }),
        createHappyPlugin('babel', ['babel-loader?'+JSON.stringify(babelrc)]),
        createHappyPlugin('json', ['json-loader'])
    ],
    postcss: postCSSConfig
  }
];

var path = require('path');
var webpack = require('webpack')

var assetsPath = path.join(__dirname, '..', '..', 'public');

module.exports = {
  entry: {
    vendor: [
             'classnames',
             'd3',
             'devour-client',
             'jquery',
             'moment',
             'nuka-carousel',
             'passport',
             'passport-google-oauth',
             'react',
             'react-addons',
             'react-autosuggest',
             'react-cookie',
             'react-d3-basic',
             'react-d3-core',
             'react-dom',
             'react-helmet',
             'react-image-gallery',
             'react-intercom',
             'react-markdown',
             'react-masonry-component',
             'react-modal',
             'react-paginate',
             'react-places-autocomplete',
             'react-redux',
             'react-router',
             'react-router-redux',
             'react-router-scroll',
             'react-slider',
             'react-transform-hmr',
             'react-waypoint',
             'redux',
             'redux-logger',
             'redux-mock-store',
             'redux-persist',
             'redux-responsive',
             'redux-thunk'
    ]
  },
  module: {
    loaders: [{ test: /\.json$/, loader: 'json-loader' }]
  },
  output: {
    path: assetsPath,
    filename: '[name].js',
    library: '[name]',
  },

  plugins: [
    new webpack.DllPlugin({
      path: path.join(assetsPath, "[name]-manifest.json"),
      context: path.join(__dirname, '..', '..', '..', 'app'),
      name: '[name]'
    }),
  ],
}

Answer 1

确保DllReferencePlugin与context生成的文件具有相同的name和DllPlugin，并且它会提供实际的manifest对象（正如docs描述的那样require清单文件：

new DllReferencePlugin({  
   context: path.join(__dirname, '..', '..', '..', 'app'),
   manifest: require(path.join(assetsPath, "vendor-manifest.json")),
   name: './vendor.js'
}),

如何正确设置webpack DLLPlugin

1 个答案: