I have a project where my code is is app directory. Both /app and /node_modules are in the same directory.
In my webpack config, both the context and and the root resolve are set to the app directory.
In my .jsx files, regardless of which folder within /app, I can import any node_module using
import { item } from 'module-name'
Now I created a new webpack file for dlls. The context in its DLLPlugin is set to the app directory again. And when I import the dll into the project's webpack, I once again use the path to app as the context in DllReferencePlugin.
I can't see where I am going wrong here, but the app.js still includes all the DLL'ed code. I am sure the issue is the incorrect context, but not sure where to even begin fixing it.
I can't seem to figure out from the docs, coz it doesn't really tell what I need to do.
My webpack files are as below (both located in the web/webpack/web directory).
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]'
}),
],
}
