0
私のコードはどこのアプリケーションディレクトリにあるのですか？/appと/ node_modulesは同じディレクトリにあります。webpack DLLPluginのコンテキストを正しく設定する方法
私のwebpack設定では、コンテキストとルート解決の両方がappディレクトリに設定されています。私.jsxのファイルで
にかかわらず、/アプリ内で、私は「モジュール名」から
インポート{項目}を使用して、任意のnode_moduleをインポートすることができたフォルダの
は、今私はのための新しいWebPACKのファイルを作成しましたdll。そのDLLPluginのコンテキストは、再びappディレクトリに設定されます。そして、プロジェクトのWebpackにdllをインポートすると、DllReferencePluginのコンテキストとしてappへのパスが再度使用されます。
私はここでどこが間違っているのか分かりませんが、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]'
}),
],
}
共有あなたの両方 'webpack.config.js'ファイル – Thaadikkaaran
@JaganathanBantheswaran両方のファイルが追加されました。 – ahskaus