Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why isn't Webpack excluding a folder I specified?

I keep my server & client code in the same repository, though I use Webpack to build only the client:

enter image description here

My project builds fine if I delete the src/server folder. But when it's there I get all these Webpack Typescript duplicate definition errors like:

[1m[31mERROR in /home/rje/projects/ekaya/typings/main/ambient/react-dom/index.d.ts
(70,5): error TS2300: Duplicate identifier 'export='.

which are caused by Webpack trying to build one of the files in my server folder that contains:

/// <reference path="../../../../typings/main.d.ts" />

How can I get Webpack to completely ignore the server folder?

I've tried in my webpack.config.js:

var rootPath = __dirname; 
var srcPath = path.join(rootPath, 'src/client');
var distPath = path.join(rootPath, 'dist/client');
var serverPath = path.join(rootPath, 'src/serve
...
loaders:
        [
            {test: /\.js$/, loader: 'babel-loader?cacheDirectory', include: [srcPath], exclude: [serverPath]},
            {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', include: [srcPath], exclude: [serverPath] },
            {test: /\.ts$/, loader: 'ts-loader?cacheDirectory', include: [srcPath], exclude: [serverPath] },
            {test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', include: [srcPath], exclude: [serverPath] },

Here's the full webpack config if it helps:

//https://webpack.github.io/docs/configuration.html

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; // e.g.  ~/projects/ekaya
var srcPath = path.join(rootPath, 'src/client');
var distPath = path.join(rootPath, 'dist/client');
var serverPath = path.join(rootPath, 'src/server');

module.exports =
{
    bail: true,
    cache: false,
    context: rootPath,
    debug: true,
    devtool: 'source-map', //inline-source-map, https://webpack.github.io/docs/configuration.html#devtool
    target: 'web', //node, web
    devServer:
    {
        contentBase: distPath,
        historyApiFallback: true,
        outputPath: path.join(distPath, 'devServer')
    },
    entry:
    {
        app: path.join(srcPath, 'app/home.jsx'),
        lib: ['react', 'react-router', 'react-dom', 'jquery', 'lodash', 'history']
    },
    output:
    {
        path: distPath,
        publicPath: '',
        filename: '[name].js',
        pathInfo: true
    },
    resolve:
    {
        root: srcPath,
        extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
        modulesDirectories: ['node_modules', srcPath, 'typings']
    },
    module:
    {
        loaders:
        [
            {test: /\.js$/, loader: 'babel-loader?cacheDirectory', include: [srcPath], exclude: [serverPath]},
            {test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', include: [srcPath], exclude: [serverPath] },
            {test: /\.ts$/, loader: 'ts-loader?cacheDirectory', include: [srcPath], exclude: [serverPath] },
            {test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', include: [srcPath], exclude: [serverPath] },
            {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /\.png$/, loader: 'file-loader'},
            {test: /\.jpg$/, loader: 'file-loader'},
            {test: /\.jpeg$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}
        ]
    },
    plugins:
    [
        new CopyWebpackPlugin
        ([
            { from: path.join(srcPath, 'images'), to: 'images' }
        ]),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new HtmlWebpackPlugin
        ({
            inject: true,
            template: path.join(srcPath, 'index.html')
        }),
        new webpack.NoErrorsPlugin()
    ]
};
like image 750
Richard Avatar asked May 05 '16 15:05

Richard


People also ask

What is exclude in webpack?

Actually, those 'include' and 'exclude' properties are telling the loaders whether to include/exclude the files described (such as the contents of node_modules ), not webpack itself. So the 'excluded' modules you import from node_modules will be bundled - but they won't be transformed by babel.

Can webpack config be Ts?

ts file directly as configuration for your project. Of course, because TypeScript is just a superset for Javascript, you can always use TypeScript to write your webpack. config.

Where are webpack file located?

To answer your specific question, the webpack configuration is stored wherever your global node_modules are installed; on Windows this is typically %AppData%\Roaming\npm\node_modules\powerbi-visuals-tools\lib\webpack.


1 Answers

Have you tried excluding the folder in your tsconfig.json?

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    ...
  },
  "exclude": [
    "src/server",
    "node_modules"
  ]
}
like image 161
Daniel Perez Alvarez Avatar answered Sep 21 '22 19:09

Daniel Perez Alvarez